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

作者: 郝艳峰Vip | 来源:发表于2018-11-01 16:48 被阅读0次

前沿

最近在项目中，有一个需求就是对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可以是图表切换数据时重新渲染