ECharts 官网： https://www.echartsjs.com/zh/index.html
在引用ECharts插件时，我们需要根据各自的需求来改变他的基本展示样式，例如：X、Y轴的数据展示，提示框的样式等，这些基本的样式修改和数据修改，可以在官网的教程和API、配置项上一一查找到，看你的仔细了。
下面有一个场景是，图表数据过大，我们需要分页加载其数据，但是，刚开始的时候没找到好的解决方法，就放弃了，那个时候只知道，如何把显示图表的缩放的模块隐藏及把每屏显示数据量固定（修改dataZoom属性）。 最近又出来了个需求，还是要实现这个样子，唉，老问题又来了，但是，今时不同往日了，我也成长了，所以，这回我尝试了用Canvas画图表和继续尝试Echarts的两种解决方式了。 （用Canvas画图表，最后存在一个问题没解决—滑动时绘制和显示有点不太顺畅，有点卡顿，所以暂时处于研究阶段，稍后在下一篇文章贴源码和解析。）
现在讲回主题，
ECharts 中的事件和行为: https://www.echartsjs.com/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA
给echarts组件区域添加datazoom事件， （当然我只是试了一下这个可以成功，但是细看了一下，好像还是不是那么完全正确，因为datazoom为数据区域缩放后的事件），当我配置，dataZoom为inside，控制图表刚开始显示的开始和结束的位置为固定的5个数据后，剩下的数据，在我在图表内部进行滑动查看时，会触发datazoom事件，这时，重新请求接口，请求分页数据，进行数据重新连接和重新赋值，然后进行改变图表显示数据。
代码奉上：（我是在HTML上引用vue和echarts文件，）
<!--html --> <!-- echarts --> <div class="charts" id='chartsDiv' > <div id="chartColumn" style="width:100%; height:400px;" ></div> </div> //js code new Vue({ el:'#app', data: { echartsData: [ {time: 1579992000000 , bmp:60}, {time: 1578984000000 , bmp:120}, {time: 1577973000000 , bmp:110}, {time: 1576962000000 , bmp:200}, {time: 1575951000000 , bmp:300}, ], //echarts图表数据 chartColumn: null, xdata: [], ydata:[], ydataMax: 300, }, mounted() { var _ = this _.dealEchartsData() }, updated() { var _ = this _.drawColumnChart() }, methods: { //日期转换格式---（yyyy-MM-dd hh:mm:ss格式转换成其他格式） dateFormat(date,format){ if(date){ date = new Date(date); var year = date.getFullYear(); var day = date.getDate() < 10 ? '0'+date.getDate() : date.getDate(); var month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1; var minutes = (Array(2).join(0) + date.getMinutes()).slice(-2); var hours = (Array(2).join(0) + date.getHours()).slice(-2); var secondes = (Array(2).join(0) + date.getSeconds()).slice(-2); var arrMonthChinese = ['一','二','三','四','五','六','七','八','九','十','十一','十二'] var monthChinese = arrMonthChinese[date.getMonth()] switch(format) { case 'year': return year + '年'; // break; case 'month': return monthChinese + '月'; case 'year_month': return year + '-' + month; case 'yyyy-MM-dd': return year + '-' + month+ '-' + day; case 'h_m_s': return {hours: hours, minutes: minutes, secondes: secondes }; case 'month_day': return month + '月' + day + '日'; case 'HH:mm': return hours + ':' + minutes; case 'MM/DD HH:mm': return month + '/' + day + ' ' + hours + ':' + minutes; case '/': return year + '/' + month + '/' + day + ' ' + hours + ':' + minutes ; default: return year + '年' + month + '月' + day + '日' + ' ' + hours + ':' + minutes ; } } }, dealEchartsData() { let _ = this _.xdata = [] _.ydata = [] _.echartsData.map(item => { _.xdata.push(_.dateFormat(item.time,'MM/DD HH:mm')) _.ydata.push(item.bmp) return item }) _.drawColumnChart() }, //echarts 数据图表方法 drawColumnChart() { var _ = this _.chartColumn = echarts.init(document.getElementById('chartColumn')); // _.chartColumn.showLoading(); //_.chartColumn.hideLoading(); _.chartColumn.setOption({ title: {}, tooltip: { //提示框组件修改 trigger: 'axis', //item confine: true, position: function(point, params, dom, rect, size){ return {left:point[0]-20 , top: '6%'} }, formatter: '{c0}', backgroundColor: '#2ECD70', extraCssText: 'width:40px;text-align: center;font-size:10px;', axisPointer: { lineStyle: { color:'#F36176' } } }, xAxis: { inverse:true ,//此属性控制方向,默认为false,改为true // type: 'category', "axisTick":{ //刻度线 "show":false }, "axisLine":{ //x轴 "show":false }, axisLabel : { textStyle: { color: '#B3B8BB' }, formatter: function (value, index) {//value当前值，index当前索引，//改变x轴显示数据 return _.dateFormat(value,'MM/DD HH:mm'); } }, data: _.xdata }, yAxis: { type: 'value', scale: true, name: 'BMP', max: 300, min: 0, splitNumber:5, "axisLine":{ //y轴 "show":false, lineStyle: { color: '#F5F5F5', } }, axisLabel : { textStyle: { color: '#B3B8BB', fontSize : 10 } }, nameTextStyle:{ color:"#333E47", fontSize : 14 } }, series: [{ data: _.ydata, type: 'line', smooth: true, showAllSymbol: true, //显示全部的折线点 symbol:'circle', symbolSize:8, hoverAnimation: false, itemStyle:{ normal:{ color:'#2ECD70', //改变折线点的颜色 lineStyle:{ color:'#2ECD70', //连线的颜色 } } }, }], dataZoom : [ //内置型数据区域缩放组件， （平移：在坐标系中滑动拖拽进行数据区域平移） { type: 'inside', //内置型数据区域缩放组件 //控制，显示数据量为5个数据点 start: (1 - 5/_.ydata.length)*100, end: 100, }, ], }); _.chartColumn.on( 'datazoom', function (params) { // console.log(params); // 监听到有平移动作，就请求接口，数组增加 _.getEchartsData() }); }, getEchartsData() { let _ = this if(_.echartsData.length < 10) { _.echartsData.push({time: 1579992000000 , bmp:60}) _.dealEchartsData() } } } });