总目标：搭建vue3、vue-cli5+echarts5

— 最近想试一下在vue里面用echarts，按照之前的方法，我都是直接引用echarts.js，然后复制官网代码就行，但是这次用import居然行不通，会报错。TypeError: Cannot read properties of undefined (reading ‘init‘)

环境

一、安装echarts

在项目目录用npm安装

npm install echarts --save

二、在需要的文件中引入echarts

方法一：局部引入

代码如下：

import * as echarts from 'echarts'

报错：

这种时候很可能是没有重新“ npm run serve”,重新run一下试试

方法二：全局引入

改成全局引入方案：
在main.js:

import * as echarts from 'echarts'
app.config.globalProperties.$echarts = echarts

一般情况下到这里就结束了，但是我这边还是报错，这种情况就还是选择局部引入吧，网上解决方案就是改引入写法，但其实我这边写法已经是没错的；还有一种是降级echarts，也可以试试看（我没试过）
其他界面正常显示，但是表格仍不显示

三、加入echarts代码

.vue代码如下：

把从echart官网的代码直接复制到mount（）函数里

这里尤其要注意！！！我肯很多教程里都没有提到，但是我这边必须要加var
官网复制过来要加个var，如果是局部引入其他地方可以不改动

如果是全局引入，这里要改

结果

参考

echarts官方安装指南 (https://echarts.apache.org/handbook/zh/basics/import)

扩展

VUE引入外部js文件：https://blog.csdn.net/lvonve/article/details/115315442
VUE引入外部CSS文件：https://blog.csdn.net/fuweipeng2012/article/details/113811464