2021-03-19-echarts5导入失败原因

最新推荐文章于 2025-05-20 08:10:31 发布

小馋鱼儿

最新推荐文章于 2025-05-20 08:10:31 发布

阅读量3.4k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：开发

本文链接：https://blog.youkuaiyun.com/xiaozi0lei/article/details/115000326

开发专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在项目中使用ECharts 5.x版本实现访问量的统计并展示为折线图，包括正确的引入方式及解决过程中遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中需要统计访问量，做一个折线图展示，使用 apache 的echarts图表类库，网上普遍流传的是 echarts4 的使用方式，提到的引入方式如下：

1，首先在 npm 里面安装
	npm install echarts --save
2，在mian.js中引入
	import Echarts from 'echarts'
	Vue.prototype.echarts = Echarts
	Vue.use(Echarts)
3，在 js 中使用
let myChart = this.$echarts.init(document.getElementById('myChart'))

按照网上的 4.x 版本的安装教程，页面刷新的时候提示 null 对象没有 init 方法，表明 $echarts 没有引入进来。

后请教前端小姐姐，小姐姐经过一顿操作猛如虎，最终找到问题原因，官方说明如下：

引用 ECharts
去除 default exports 的支持
如果使用者在 v4 中这样引用了 echarts：

import echarts from 'echarts';
// 或者按需引入
import echarts from 'echarts/lib/echarts';
这两种方式，v5 中不再支持了。

使用者需要如下更改代码解决这个问题：

import * as echarts from 'echarts';
// 按需引入
import * as echarts from 'echarts/lib/echarts';

按照官方教程，使用 v5 的引入方式，页面的折线图展示出来了。
感谢前端小姐姐的鼎力支持！