博客

前提

• 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就可以了