解决echarts echarts数据动态更新和dataZoom被重置问题
版权申诉
5星 · 超过95%的资源 20 浏览量
2020-11-20
05:13:19
上传
评论 2
收藏 42KB PDF 举报 
解决解决echarts echarts数据动态更新和数据动态更新和dataZoom被重置问题被重置问题
1.全局绑定滚轮事件，获得dataZoom最新的位置：
myChart.on('dataZoom',function(event){
if(event.batch){
start=event.batch[0].start;
end=event.batch[0].end;
}else{
start=event.start;
end=event.end;
};
});
2.把最新的start和end赋值给要更新的option
window.setInterval(function () {
num=Math.random()*num+100;
data0.splice(0,1);
data0.push(num);
option.dataZoom[0].start=start;
option.dataZoom[0].end=end;
myChart.setOption(option);
},3000);
3.echart数据增量刷新还可以用appendData
补充知识：补充知识：echarts动态添加数据动态添加数据
我就废话不多说了，大家还是直接看代码吧~
<template>
<!--为echarts准备一个具备大小的容器dom-->
<div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'Chart',
data () {
return {
charts: '',
}
},
methods:{
initLine(id){
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
title: {
text: '动态数据 + 时间坐标轴'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0] return params.value[0] + ' : ' + params.value[1] },
axisPointer: {
animation: false
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
评论11
最新资源