首页 前端知识 Vue3项目中使用ECharts图表并实现自适应效果

Vue3项目中使用ECharts图表并实现自适应效果

2024-02-20 10:02:33 前端知识 前端哥 925 956 我要收藏

文章目录

  • 一、Vue3项目安装ECharts
  • 二、引入、使用ECharts
    • 1.创建图表组件,并在父组件中引入使用
    • 2.引入ECharts
    • 3.ECharts图表自适应
  • 总结


一、Vue3项目安装ECharts

在项目中输入如下代码:

npm install echarts --save

在这里插入图片描述
安装完成可以在package.json中看到:
在这里插入图片描述

二、引入、使用ECharts

1.创建图表组件,并在父组件中引入使用

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

2.引入ECharts

在需要使用ECharts的页面引入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://www.qianduange.cn//article/2354.html
标签
评论
发布的文章

AJAX(二)jQuery

2024-03-05 09:03:04

jQuery操作DOM(3)

2024-03-05 09:03:36

jQuery - 获取内容和属性

2024-03-05 09:03:34

深拷贝浅拷贝方法总结

2024-03-05 09:03:27

JQuery简介与解析

2024-03-01 12:03:31

Java Web(十)--jQuery

2024-03-05 09:03:24

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!