前提

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

# echarts
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue