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可以是图表切换数据时重新渲染