vue3使用echarts并封装echarts组件方式

目录

• 前言
• 一、安装并导入echart
• 1.npm下载包
• 2.配置echarts
• 二、使用echarts
• 三、封装echarts为组件

前言

本文使用的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配置值 和 设置组件大小

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