[JavaScript知识库]Vue-echarts 更改options没有触发视图更新问题解决——配置notMerge:true

前提

?

• echart@5.1.2
• vue-echarts@6.0.0-rc.6

vue-echarts是个将echarts封装为vue组件的包

引入后，代码中可以使用<v-chart :option="chartOption"/>来绘制表格

现象

this.chartOption更改后，如果内容比原来多，则会触发更新，反之不会。

例如点击按钮后将this.chartOption设置为空对象{}，发现图表并未更新。

this.chartOption输出发现已改变。

调查

根据官方文档介绍

echartsInstance.setOption(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
echartsInstance.setOption(option: Object, opts?: {
    notMerge?: boolean;
    replaceMerge?: string | string[];
    lazyUpdate?: boolean;
})

• opts

  • notMerge:?boolean

    可选。是否不跟之前设置的?option?进行合并。默认为?false。即表示合并。合并的规则，详见?组件合并模式。如果为?true，表示所有组件都会被删除，然后根据新?option?创建所有新组件。

  • replaceMerge:?string?|?string[]?详见官方文档

  • lazyUpdate:?boolean 详见官方文档

  • silent:?boolean?详见官方文档

?如上标红字段，我的问题是由于没有配置notMerge造成的。因为默认为false，导致每次传入的option都与先前的合并了

解决

配置notMerge:为true即可。

通过查询vue-echarts文档有个prop: update-options可以配置notMerge

<v-chart option="chartOption" autoresize :update-options="{notMerge:true}"/>

参考资料

1. echarts官方
2. vue-echarts 文档

其他问题?

刚开始使用echarts的时候发现给了配置，却没有绘制图表。这个是由于没有给元素的宽高导致的。使用css在echarts的元素配置height/width就可以了