Echart横坐标时间轴滑动

编程入门 行业动态 更新时间:2024-10-21 12:55:19

Echart<a href=https://www.elefans.com/category/jswz/34/1656596.html style=横坐标时间轴滑动"/>

Echart横坐标时间轴滑动

主要针对于dataZoom的使用,代码如下:

option = {title: {text: '未来一周气温变化',subtext: '纯属虚构'},tooltip: {trigger: 'axis'},legend: {data:['最高气温','最低气温']},toolbox: {show: true,feature: {dataZoom: {yAxisIndex: 'none'},dataView: {readOnly: false},magicType: {type: ['line', 'bar']},restore: {},saveAsImage: {}}},xAxis:  {type: 'category',boundaryGap: false,data: ['周一','周二','周三','周四','周五','周六','周日']},yAxis: {type: 'value',axisLabel: {formatter: '{value} °C'}},"dataZoom": [{"show": true, "height": 20, "xAxisIndex": [0], bottom:40,"start": 0, "end": 80}, {"type": "inside", "show": true, "height": 15, "xAxisIndex": [0], "start": 1, "end": 35}],series: [{name:'最高气温',type:'line',data:[11, 11, 15, 13, 12, 13, 10],markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}},{name:'最低气温',type:'line',data:[1, -2, 2, 5, 3, 2, 0],markPoint: {data: [{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}]},markLine: {data: [{type: 'average', name: '平均值'},[{symbol: 'none',x: '90%',yAxis: 'max'}, {symbol: 'circle',label: {normal: {position: 'start',formatter: '最大值'}},type: 'max',name: '最高点'}]]}}]
};

 

转载于:.html

更多推荐

Echart横坐标时间轴滑动

本文发布于:2024-03-12 19:14:45,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1732214.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:横坐标   时间   Echart

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!