定制软件vue 中 echarts 5.4.0 版本使用说明

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

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

import echarts from 'echarts';// 或者按需引入import echarts from 'echarts/lib/echarts';
1
2
3

这两种方式，v5 中不再支持了。

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

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

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

//引入echartsimport * as echarts from 'echarts';Object.defineProperties(Vue.prototype, {  echarts: { get: () => echarts }});
1
2
3
4
5
6

并且需要在代码里加上：

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

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

<script>import * as echarts from 'echarts';export default {}</script>
1
2
3
4

不加 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]    }  ]});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

那么就感谢同学们观看啦，以后有技术问题也请大家多指教！再见！