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设置为空对象{}，发现图表并未更新。

调查

根据官方文档介绍

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}"/>

 原生echarts

import * as echarts from 'echarts'; // echarts 5
let echartsInstance = echarts.init(element);
echartsInstance.setOption(options, {notMerge:true});

参考资料

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

其他问题 

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