vue 中 echarts 5.4.0 版本使用说明

lan.feitianhou

已于 2022-10-03 16:06:05 修改

阅读量3.9k

点赞数 1

文章标签： echarts vue.js javascript

于 2022-10-03 16:04:00 首次发布

本文链接：https://blog.csdn.net/m0_52022213/article/details/127152828

版权

本文介绍了在Vue项目中使用Echarts 5.4.0版本时遇到的问题及解决方案。作者分享了如何解决Echarts在Vue中无法正常显示的报错，强调了v5版本对default exports的支持变化，提供了适应新版本的引用方式，并给出了全局和组件内引用Echarts的示例代码。

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

哈喽！大家好
最近回头学习了一下echarts，但是之前在vue中引用echarts的时候出现了问题，就想在这里给大家分享一下怎么解决的，也帮助一下最近在这方面遇到问题的同学。
首先，我发现echarts在demo上总是报错，显示不出来，然后工具启动的时候也有报错，不是npm包的报错就是其它的错误。
不过好在都是虚惊一场，也都解决了
然后看官方文档是版本的问题，在v5这个版本中：

引用 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中一些特性的改变还有API的改变，还有非兼容方面的改动，导致不能像以前一样引用echarts，那么官方也是在文档里面详细的说明了。
有小伙伴就问了，这样也不行啊！
别着急，慢慢看我讲
先这样，再那样就行了！
等等，开个玩笑！
v5版本下，main.js中全局引入需要这样：

//引入echarts
import * as echarts from 'echarts';

Object.defineProperties(Vue.prototype, {
  echarts: { get: () => echarts }
});

并且需要在代码里加上：

var myChart = this.echarts.init(document.getElementById('main'));

this 指向
————————————————————————————————————
如果组件单独引用可以这样：

<script>
import * as echarts from 'echarts';
export default {}
</script>

不加 this

其它的照着官方文档这样写就行了：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});