echarts在vue项目中的使用

1.下载安装

1.1控制台运行 npm install echarts --save

1.2然后有一种在main.js里面配置全局变量的方法（此方法我配置了没用）

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

1.2 使用官网的方法引用（在使用页面引入echarts）

import * as echarts from "echarts";

2. 使用途中报错util.js?d5c9:404 Uncaught Error: id duplicates: u00000

util.js?d5c9:404 Uncaught Error: id duplicates: u00000
    at assert (util.js?d5c9:404:1)
    at eval (model.js?fea5:352:1)
    at Array.forEach (<anonymous>)
    at each (util.js?d5c9:205:1)
    at makeIdAndName (model.js?fea5:349:1)
    at Module.mappingToExists (model.js?fea5:197:1)
    at GlobalModel.visitComponent (Global.js?05a0:294:1)
    at Function.entity.topologicalTravel (component.js?58db:122:1)
    at GlobalModel._mergeOption (Global.js?05a0:287:1)
    at GlobalModel._resetOption (Global.js?05a0:203:1)

该问题好像是因为图标重绘时发生问题，解决办法：每次使用后将charts指向空

let chartDom = document.getElementById("chartLine");
let myChart = echarts.init(chartDom);
.......
myChart.clear();        // 这句可能有用
myChart.setOption(option);
myChart = null;        // 主要是这一句

然后第二天起来的时候我将指向空的两行代码删掉，居然还能正常运行。

3. 在做柱状图下钻时报错Uncaught TypeError: Cannot read properties of null (reading 'setOption')

Uncaught TypeError: Cannot read properties of null (reading 'setOption')
    at ECharts.eval (index.vue?806d:373:1)
    at ECharts.Eventful.trigger (Eventful.js?8434:103:1)
    at ECharts.handler (echarts.js?f2a6:847:1)
    at Handler.Eventful.trigger (Eventful.js?8434:103:1)
    at Handler.dispatchToElement (Handler.js?8e4e:145:1)
    at Handler.<computed> [as click] (Handler.js?8e4e:220:1)
    at HandlerDomProxy.Eventful.trigger (Eventful.js?8434:103:1)
    at HandlerDomProxy.localDOMHandlers.<computed> (HandlerProxy.js?bc59:162:1)
    at HTMLDivElement.eval (HandlerProxy.js?bc59:209:1)

问题代码块

let chartDom = document.getElementById("chartdetailbar");
let myChart = echarts.init(chartDom);
let option;
option = {......}
let drilldownData= [......]

myChart.on("click", function (event) {
  if (event.data) {
    var subData = drilldownData.find(function (data) {
      return data.dataGroupId === event.data.groupId;
    });
    if (!subData) {
      return;
    }
    myChart.setOption({        // 出错地方
      xAxis: {
        data: subData.data.map(function (item) {
          return item[0];
        }),
      },
      series: {
        type: "bar",
        id: "sales",
        dataGroupId: subData.dataGroupId,
        data: subData.data.map(function (item) {
          return item[1];
        }),
        universalTransition: {
          enabled: true,
          divideShape: "clone",
        },
      },
    });
  }
});
// myChart.clear();
myChart.setOption(option);
// myChart = null;

最后发现是因为将myChart指向空后找不到，需要将最后的那两行代码注释掉