vue3 封装一个通用echarts组件

news/2024/12/23 14:48:45/

实现这个组件需要引入echarts和vue-echarts插件,使用vue-echarts是因为它帮我们封装了一些很常用的功能,比如监听页面resize后重新渲染功能,本次组件只使用到了autoresize配置,其它可以根据官方文档按需选配

https://github.com/ecomfe/vue-echarts

首先引入echarts和vue-echarts插件

npm install echarts vue-echarts -S

组件定义参数如下

import type { ECBasicOption } from 'echarts/types/dist/shared'const props = defineProps({// echarts options 传参option: {type: Object as PropType<ECBasicOption>,required: true,},// 容器宽度width: {type: String,default: '100%',},// 容器高度height: {type: String,default: '400px',},
})

组件代码如下

<script setup lang="ts">
import { PropType, provide } from 'vue'
import type { ECBasicOption } from 'echarts/types/dist/shared'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'// 按需引入
import { PieChart, LineChart, FunnelChart, CustomChart } from 'echarts/charts'
import {TitleComponent,TooltipComponent,LegendComponent,GridComponent,ToolboxComponent,
} from 'echarts/components'import VChart, { THEME_KEY } from 'vue-echarts'
use([CanvasRenderer,PieChart,TitleComponent,TooltipComponent,LegendComponent,GridComponent,LineChart,ToolboxComponent,FunnelChart,CustomChart,
])// 传入主题
provide(THEME_KEY, 'light')const props = defineProps({option: {type: Object as PropType<ECBasicOption>,required: true,},width: {type: String,default: '100%',},height: {type: String,default: '400px',},
})
</script><template><div class="chart-container" :style="{ width, height }"><VChart class="w-full h-full" :option="props.option" autoresize /></div>
</template>


http://www.ppmy.cn/news/1350426.html

相关文章

如何快速上手Vue框架

Vue.js 是一款流行的前端 JavaScript 框架&#xff0c;以其直观、易上手和高效的特点而受到广大开发者的喜爱。本文将指导你如何快速上手 Vue.js&#xff0c;让你在短时间内掌握其基本概念和核心功能。 1. 了解Vue.js的基本概念 在开始之前&#xff0c;我们需要先了解 Vue.js…

蓝桥杯每日一题------背包问题(二)

前言 本次讲解背包问题的一些延申问题&#xff0c;新的知识点主要涉及到二进制优化&#xff0c;单调队列优化DP&#xff0c;树形DP等。 多重背包 原始做法 多重背包的题意处在01背包和完全背包之间&#xff0c;因为对于每一个物品它规定了可选的个数&#xff0c;那么可以考虑…

用git命令来上传项目到GitHub我自己的仓库

目录 在GitHub上创建仓库并使用git命令上传到仓库的步骤如下&#xff1a; 其他操作 怎么退出git/COMMIT_EDITMSG [unix] 相关报错 error: src refspec main does not match any error: failed to push some refs to https://github.com/Liu22Jun16Liang/MyQt error: fail…

航芯ACM32G103开发板评测 08 ADC Timer外设测试

航芯ACM32G103开发板评测 08 ADC Timer外设测试 1. 软硬件平台 ACM32G103 Board开发板MDK-ARM Keil 2. 定时器Timer 在一般的MCU芯片中&#xff0c;定时器这个外设资源是非常重要的&#xff0c;一般可以分为SysTick定时器&#xff08;系统滴答定时器&#xff09;、常规定时…

牛客——递归实现指数型枚举(枚举,dfs)

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 从 1∼n1\sim n1∼n这 n (n≤16)(n \leq 16)(n≤16) 个整数中随机选取任意多个&#xff0c;输出所有可能的选择方案。 输入描述: 一个整数n。 输出描述: 每行一种方案。同一行内…

[NSSCTF]-Web:[SWPUCTF 2021 新生赛]easyrce解析

先看网页 代码审计&#xff1a; error_reporting(0); &#xff1a;关闭报错&#xff0c;代码的错误将不会显示 highlight_file(__FILE__); &#xff1a;将当前文件的源代码显示出来 eval($_GET[url]); &#xff1a;将url的值作为php代码执行 解题&#xff1a; 题目既然允许…

【ES】--ES集成热更新自定义词库(字典)

目录 一、问题描述二、具体实施1、Tomcat实现远程扩展字典2、验证生效3、ES配置远程扩展字典4、为何不重启ES能实现热更新 一、问题描述 问题现象: 前面完成了自定义分词器词库集成到ES中。在实际项目中词库是时刻在变更的&#xff0c;但又不希望重启ES&#xff0c;对此我们应…

【51单片机】DS18B20(江科大)

一、DS18B20温度传感器 1.DS18B20介绍 DS18B20是一种常见的数字温度传感器,其控制命令和数据都是以数字信号的方式输入输出,相比较于模拟温度传感器,具有功能强大、硬件简单、易扩展、抗干扰性强等特点 测温范围 :- 55℃到125℃ 通信接口:1-Wire(单总线) 其它特征:可形成…