一、Vue3项目安装ECharts

在项目中输入如下代码：

npm install echarts --save

图片59.png

安装完成可以在package.json中看到：

图片60.png

二、引入、使用ECharts

创建ECharts图表的文件barCharts.vue，将它引入并在父组件中使用。在使用setup时，我们把组件直接引入进来，就可以直接使用了，不用像Vue2那样需要注册了。在父组件中创建一个有宽高的容器，里面放ECharts组件，ECharts图表的大小就默认是该容器的大小。

图表组件：图片62.png 父组件：

图片63.png

在需要创建定义ECharts的页面引入ECharts：

import * as echarts from "echarts";

创建ECharts容器，绑定ref属性，在TypeScript中创建相同名称的ref，就可以利用ref获取ECharts实例了。 注意：Vue3中是没有this的，不能像Vue2一样操作ref!

图片64.png

获取实例之后，就写图表的配置项，再用setOption方法把写的配置项显示出来。我这里配置项就是拷贝的ECharts官方的饼图配置。

图片65.png

效果如下所示：

图片66.png

当浏览器窗口变化时，图表需要随着窗口的变化而变化。可以利用window.addEventListener方法监听窗口的变化，当窗口变化时，让需要自适应的ECharts实例调用一下ECharts官方提供的resize方法就好了。

图片67.png

效果如下所示：可以看到图表会随着浏览器的变化而变化，这就是自适应了。

图片68.png

图片69.png

图片70.png

以上就是今天要分享的关于Vue3中使用ECharts的用法。