Echars 折线图自动向右平移显示数据(数据量大的时候适应)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Echars 折线图 自动向右平移显示数据(数据量大的时候适应)</title></head><body><!-- Dom容器 --><div id="myCharts" style="width: 600px;height:400px;"></div></body><script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script><script type="text/javascript">var timer = null;function showEchars(){// X轴数据var xAxisData = ["08~09", "09~10", "10~11", "11~12", "12~13", "13~14", "14~15", "15~16", "17~18", "18~19", "19~20","20~21", "21~22", "22~23", "23~00", "00~01", "01~02", "02~03", "03~04", "04~05", "05~06", "06~07", "07~08"];// 需要渲染的series数据var seriesData = [90, 80, 80, 90, 70, 80, 99, 100, 79, 90, 100, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90];// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('myCharts'));// 指定图表的配置项和数据var option = {tooltip: {trigger: 'axis',},dataZoom: [{type: 'slider',show: false,realtime: true,startValue: 0,endValue: 30, // 初始显示index0-30的数据,可根据你的数据量设置filterMode: 'none',}, ],xAxis: {show: true,boundaryGap: false,data: xAxisData},yAxis: [{type: 'value'}, ],"dataZoom": [{"show": true,"height": 12,"xAxisIndex": [0],bottom: '2%',"start": 0,"end": 100,handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',handleSize: '110%',handleStyle: {color: "#d3dee5",},textStyle: {color: "#fff"},borderColor: "#90979c"}, {"type": "inside","show": true,"height": 15,"start": 1,"end": 35}],series: [{type: 'line',itemStyle: {color: '#188df0',},areaStyle: {// 渐变色color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#188df0',},{offset: 1,color: '#83bff6',},]),},data: seriesData}, ],};// 使用刚指定的配置项和数据显示图表myChart.setOption(option);var startNumber = 0;// 有多少条数据var xAxisDatalen = xAxisData.length;// len的值,可以根据你的数量量设置,不要超过xAxisDatalen的值,不然不会动var len = 12; //这里请注意timer && clearInterval(timer);timer = setInterval(function() {if (startNumber === xAxisDatalen - len) {startNumber = 0;}myChart.dispatchAction({type: 'dataZoom',startValue: startNumber,endValue: startNumber + len,});startNumber++;}, 1000);}showEchars();</script>
</html>

Echars 折线图自动向右平移显示数据(数据量大的时候适应)相关推荐

echarts 横坐标显示一个月,excel折线图横坐标最后一个点选择数据选不上是什么原因？...
excel折线图横坐标最后一个点选择数据选不上是什么原因? 如果你说的是折线图横坐标选中的数据最后一个无法显示在横坐标上您可以尝试一下可以右击横坐标轴-设置坐标轴格式-选择大小与属性-对其方式-文 ...
python折线图样式_011 利用Python进行数据可视化
本文梳理了数据可数化的基本套路及对应函数的使用方法. 1- 数据可视化是什么借助图形来清晰有效表达信息的方式称为可视化 2 - 数据可视化的基本流程 2.1 整理数据 2.2 明确目的 2.3 寻找 ...
R语言使用rnorm函数生成正太分布数据、使用plot函数可视化折线图、使用points函数指定数据点的颜色、使用lines函数指定线条的颜色
R语言使用rnorm函数生成正太分布数据.使用plot函数可视化折线图.使用points函数指定数据点的颜色.使用lines函数指定线条的颜色目录 R语言使用rnorm函数生成正太分布数据.使用pl ...
QChart空心折线图，双坐标轴显示不同参数
QChart空心折线图,双坐标轴显示不同参数界面显示说明附带代码界面显示说明过几天再详细讲解,这段时间有些忙hhh 附带代码 #ifndef FORM_SCATTER_H #define ...
graphpad做折线图坐标轴数字_多组数据制作折线图，四步让你的图表实用又美观，老板看了都说好...
Excel图表相信许多朋友都操作过,图表能够更加形象和生动的展示出我们的数据趋势和差异.但在做图表的过程中,相信许多朋友都碰到过一个尴尬的问题,那就是对多组数据进行图表展示的时候,图表就会堆积到一起, ...
python绘制折线图中文图例不显示_python使用matplotlib绘图时图例显示问题的解决...
前言 matplotlib是基于Python语言的开源项目,旨在为Python提供一个数据绘图包.在使用Python matplotlib库绘制数据图时,需要使用图例标注数据类别,但是传参时,会出现图 ...
JAVA中柱状图和折线图组合,分组折线图、柱状图实现（多条折线图、柱状图同时显示）实现方式...
使用MPAndroidChartLibery实现分组折线图和柱状图. 一.实现步骤: 1.同样需要引入mpandroidchartlibrary-2-1-6.jar :下载地址及介绍见Androi ...
分组折线图、柱状图实现（多条折线图、柱状图同时显示）实现方式
使用MPAndroidChartLibery实现分组折线图和柱状图. 一.实现步骤: 1.同样需要引入mpandroidchartlibrary-2-1-6.jar :下载地址及介绍见Android ...
android自定义曲线控件,Android自定义折线图（可拖动显示）
废话不多说先上图咯图一至于怎么做呢咱们可以先获取下折线图数据分析一波 { "code": 200, "message": "", &q ...

Echars 折线图自动向右平移显示数据(数据量大的时候适应)

Echars 折线图自动向右平移显示数据(数据量大的时候适应)相关推荐

最新文章

热门文章

Echars 折线图 自动向右平移显示数据(数据量大的时候适应)

Echars 折线图 自动向右平移显示数据(数据量大的时候适应)相关推荐

最新文章

热门文章

Echars 折线图自动向右平移显示数据(数据量大的时候适应)

Echars 折线图自动向右平移显示数据(数据量大的时候适应)相关推荐