一、Vue3项目安装ECharts
npm install echarts --save
二、引入、使用ECharts
1.创建图表组件，并在父组件中引入使用
创建ECharts图表的文件barCharts.vue，将它引入并在父组件中使用。在使用setup时，我们把组件直接引入进来，就可以直接使用了，不用像Vue2那样需要注册了。
在父组件中创建一个有宽高的容器，里面放ECharts组件，ECharts图表的大小就默认是该容器的大小。
2.引入ECharts
import * as echarts from "echarts";
创建ECharts容器，绑定ref属性，在TypeScript中创建相同名称的ref，就可以利用ref获取ECharts实例了。
注意：Vue3中是没有this的，不能像Vue2一样操作ref!
获取实例之后，就写图表的配置项，再用setOption方法把写的配置项显示出来。我这里配置项就是拷贝的ECharts官方的饼图配置。
效果如下所示：
3.ECharts图表自适应
当浏览器窗口变化时，图表需要随着窗口的变化而变化。可以利用window.addEventListener方法监听窗口的变化，当窗口变化时，让需要自适应的ECharts实例调用一下ECharts官方提供的resize方法就好了。
效果如下所示：
可以看到图表会随着浏览器的变化而变化，这就是自适应了。
总结
以上就是今天要分享的关于Vue3中使用ECharts的用法。
原文地址:https://blog.csdn.net/m0_52043522/article/details/130528189
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_19111.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
