解决echartsecharts数据动态更新和dataZoom被重置问题1.全局绑定滚轮事件，获得dataZoom最新的位置：
<('dataZoom',function(event){
if(event.batch){
start=event.batch[0].start;
end=event.batch[0].end;
}else{
start=event.start;
d;
};
});
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);
补充知识：echarts动态添加数据
我就废话不多说了，⼤家还是直接看代码吧~
<template>
<!--为echarts准备⼀个具备⼤⼩的容器dom-->
<div id="main" ></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'Chart',
data () {
return {
charts: '',
}
},
methods:{
initLine(id){
this.charts = echarts.ElementById(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: {
setoptionshow: 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(() => {
size();
},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(() => {
size();
},8000)
})
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
补充
主动使⽤echarts的resize⽅法改变图表⼤⼩：
(opts?: {
width?: number|string,
height?: number|string,
silent?: boolean
})
当在参数中填⼊宽⾼，size({width:300})，dom层必须有⼀个初始化像素的宽⾼，百分⽐的宽⾼该⽅法不会⽣
以上这篇解决echarts echarts数据动态更新和dataZoom被重置问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。