记录使用echart遇到的错误

原创已于 2022-07-28 10:26:36 修改 · 6.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #echarts #js

于 2020-10-24 15:02:57 首次发布

本文详细解答了在使用ECharts过程中遇到的常见问题，包括引入错误、Series配置、视觉映射组件失效及多图表冲突，提供了解决方案和最佳实践，帮助开发者提升使用体验。

使用echart遇到的错误（更新至7月28日）

一、Uncaught ReferenceError: echarts is not defined

在 echarts 初始化实例前，vue 项目的话确保在全局或者局部引入了 echats；静态页面的话确保在 body 引入了 echarts.js 文件，引入的位置需要在使用初始化 echats 实例之前。

二、Component series.XXX not exists. Load it first

设置series的时候确保name，data，type这3个必须的属性设置上了

series: [{
	name: '业务指标',
    type: 'gauge',
    detail: { formatter: '{value}%' },
    data: [{ value: 50, name: '完成率' }]
}]

检查一下引入方式

文件script引入，官网提供了多种版本（我最后的解决方法）
完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。

一些特殊的图表在引入 echarts.js 之外还需要导入其他对应文件，比如路径图需要引入china.js，水球图需要引入 echarts-liquidfill.js 等。

NPM安装导入
1、安装模块
npm i echarts -S
2、局部引入
let echarts = require("echarts");
或者import echarts from 'echarts';
3、初始化echarts实例
let myChart = echarts.init(this.$refs.chart);
或者
2、在main.js通过原型全局挂载
import echarts from 'echarts'; Vue.prototype.$echarts = echarts;
3、初始化echarts实例
let myChart = this.$echarts.init(this.$refs.chart);

三、在使用折线图是遇上visualMap(视觉映射组件)不起作用

检查引入的文件
1、visualMap是3.x版本中2.x中dataRange的新名字你要是引用的2.x的echarts.js 就没有visualMap组件你需要引用3.x的js文件
2、建议引入完全版echarts.js文件，常用版虽然有折线图但是没有visualMap组件

四、There is a chart instance already initialized on the dom

主要是上一个图表初始化后未销毁出现的情况，一个页面多个图表也会出现这种情况

vue3的解决方案
1、全局声明echarts dom对象
let myChart1, myChart2
2、在方法内正常初始化echarts对象
myChart1 = echarts.init(document.getElementById("chart-proportion"))
3、在离开当前页面时销毁
onUnmounted(() => { myChart1.dispose(); myChart2.dispose(); })