解决echarts echarts数据动态更新和dataZoom被重置问题

解决echarts echarts数据动态更新和dataZoom被重置问题
2020-11-07 10:00:35 阅读数 9946 收藏 0
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动态添加数据

我就废话不多说了，大家还是直接看代码吧~

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’,
boundaryGap: [0, ‘100%’],
splitLine: {
show: false
}
},
animation: false
})
}
},
mounted(){
this.$nextTick(function() {
this.initLine(‘main’)
this.charts.setOption({
series : [
{
name : ‘模拟数据0’,
type : ‘line’,
showSymbol : false,
hoverAnimation : false,
data : [[‘2018-01-02’, ‘3’],[‘2018-01-05’, ‘4’]]
}
]
})

    setTimeout(() => {
      this.charts.appendData({
        seriesIndex:0,
        data : [['2018-01-03', '1'],['2018-01-07', '2']]
      })
    },2000)
    
    setTimeout(() => {
      this.charts.resize();  
    },4000)

    setTimeout(() => {
      this.charts.setOption({
        series : [
          {},
          {
            name : '模拟数据1',
            type : 'line',
            showSymbol : false,
            hoverAnimation : false,
            data : [['2018-01-02', '5'],['2018-01-05', '10']]
          }
        ]
      })
      this.charts.appendData({
        seriesIndex:1,
        data : [['2018-01-03', '11'],['2018-01-10', '2']]
      })
    },6000) 
    setTimeout(() => {
      this.charts.resize();  
    },8000)
  })
}

}

补充

主动使用echarts的resize方法改变图表大小：

(opts?: {
width?: number|string,
height?: number|string,
silent?: boolean
})
当在参数中填入宽高，this.echarts.resize({width:300})，dom层必须有一个初始化像素的宽高，百分比的宽高该方法不会生效。