问题:当修改setOption值的时候,我们异步回来的数据层级比较深的情况下,需要echarts重绘,否则不会如愿显示
主要体现:你增加数据可以,但是减少数据,发现视图上还是保持着最多数据的展示效果,很纳闷,明明可以通过移步修改数据,为何增加可以绘制地图而减少好像就什么都没有做
解决:原来是setOption的第二参数(notMerge)在做怪
因为echarts绘制都要创建一个Echarts实例,返回echartsInstance。所以我们只需要在重新创建的时候,移除之前创建的实例并且重新创建一个Echarts实例:
var option = {
tooltip: {
trigger: "axis",
extraCssText: "max-height: 200px; overflow: auto;", // 设置悬浮窗样式
position: function (pos, params, dom) {
dom.style.pointerEvents = "auto"; // 修改悬浮窗不可绑定事件的css属性
},
},
legend: {
type: "scroll",
data: this.arrCourse_legend,
},
grid: {
top: "14%",
left: "0",
right: "1%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
axisLabel: { rotate: 45 },
data: this.arrCourse_xAxis,
},
yAxis: {
type: "value",
axisLabel: { rotate: 45 },
},
series: this.arrCourseSeries,
};
myChart.setOption(option, true); // 参数二传true进去
设置为true的话,就是notMerge 不合并,false的话,就Merge 之前的东西还保留~
可选,是否不跟之前设置的 option 进行合并,默认为 false,即合并。
拓展:setOption中3个参数的含义
option—— 图表的配置项和数据
notMerge—— 可选,是否不跟之前设置的 option 进行合并,默认为 false,即合并。
lazyUpdate—— 可选,在设置完 option 后是否不立即更新图表,默认为 false,即立即更新。