vue-echarts 操作图表切换大数据量时图表画图错误之解决

2018-11-01  本文已影响0人  郝艳峰Vip

前沿

最近在项目中,有一个需求就是对echarts做操作,不断地切换图表,画图,重绘,在过程中发现一般的重绘解决不了问题,需要先清空图表,再重绘。以下为解决方案。

以下都为vue的写法

   <div id="performanceBarD"
             :style="{width: '100%', height: '395px'}"></div>
    let  MyEcharts = this.$echarts.init(
        document.getElementById("performanceBarD")
      );
let echartsOptions= {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
      MyEcharts.clear();   //先清掉图表,再重绘图表
      MyEcharts.setOption(echartsOptions, true); //设置为true可以是图表切换数据时重新渲染
上一篇下一篇

猜你喜欢

热点阅读