vue3使用echarts并封装echarts组件方式_vue.js_

前言

本文使用的echarts版本为5.3.1，详细文档可见：

Echarts 官方文档

文中案例基于vue3编写，有关js部分使用的是"script setup"语法糖形式

一、安装并导入echart

1.npm下载包

npm i echarts --save

2.配置echarts

这里介绍使用 provide 和 injec 配置 echartst

provide、injec 可以实现嵌套组件之间进行传递数据和方法

在父组件使用provide可向子代组件传递数据；子级组件使用inject来获取上级组件传递过来的数据

注：这两个函数都是在setup函数中使用的

在 app.vue 下

在子代组件，使用 inject 获取 echarts 后便可使用

二、使用echarts

这里举一个小例子：

效果：

三、封装echarts为组件

echarts封装组件：

上面的在不同屏幕大小下自适应重绘图表需在 flexible.js 的配置下才有效，有关 flexible 的配置可参考 “移动端与大屏幕自适应适配方案”

注：在调用该组件时需传入 option配置值 和 设置组件大小

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！