vue3 封装一个通用echarts组件

实现这个组件需要引入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.mzph.cn/news/682917.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

11.JavaScript 中如何进行隐式类型转换?

首先要介绍ToPrimitive方法&#xff0c;这是 JavaScript 中每个值隐含的自带的方法&#xff0c;用来将值 &#xff08;无论是基本类型值还是对象&#xff09;转换为基本类型值。如果值为基本类型&#xff0c;则直接返回值本身&#xff1b;如果值为对象&#xff0c;其看起来大概…

vivado HDL编码技术

HDL编码技术 介绍 硬件描述语言&#xff08;HDL&#xff09;编码技术使您能够&#xff1a; •描述数字逻辑电路中最常见的功能。 •充分利用AMD设备的体系结构功能。 •模板可从AMD Vivado™设计套件集成设计环境中获得&#xff08;侧面&#xff09;。要访问模板&#xff…

机器学习系列——(二十一)神经网络

引言 在当今数字化时代&#xff0c;机器学习技术正日益成为各行各业的核心。而在机器学习领域中&#xff0c;神经网络是一种备受瞩目的模型&#xff0c;因其出色的性能和广泛的应用而备受关注。本文将深入介绍神经网络&#xff0c;探讨其原理、结构以及应用。 一、简介 神经网…

Python socket库 基础概念

socket库是Python中用于网络编程的标准库之一&#xff0c;它提供了创建套接字&#xff08;socket&#xff09;对象、绑定地址和端口、监听连接、接受连接、发送和接收数据等功能。 套接字是网络通信的基础&#xff0c;它允许程序之间进行数据传输和通信。 套接字类型&#xf…

【碎片知识点】安装Linux系统 VMware与kali

天命&#xff1a;VMware就是可以运行操作系统的载体&#xff0c;kali就是Linux的其中一个分支 天命&#xff1a;Linux有两个分支版本&#xff1a;centos与ubuntu&#xff0c;kali底层就是ubuntu&#xff08;所有Linux用起来都差不多&#xff0c;没啥区别&#xff09; 天命&…

CSS之选择器、优先级、继承

1.CSS选择器 常用的选择器 <body><div class"parent"><div id"one" style"background: blue" class"child">1<div class"one_one">11</div><div style"background-color: blueviole…

一个页面需要加载大量的图片,如何提升用户体验?

当网站页面需要加载大量图片时&#xff0c;优化用户体验非常关键&#xff0c;以下是一些方法来提升用户体验&#xff1a; 图片懒加载&#xff08;Lazy Loading&#xff09;&#xff1a;只加载用户可以看到的图片&#xff0c;当用户向下滚动页面时&#xff0c;再加载其他图片。这…

假期2.14

1、选择题 1.1、若有下面的变量定义&#xff0c;以下语句中合法的是&#xff08; A &#xff09;。 int i&#xff0c;a[10]&#xff0c;*p&#xff1b; A&#xff09; pa2; B&#xff09; pa[5]; C&#xff09; pa[2]2; D&#xff09; p&(i2); 1.2、…

2024LeetCode分类刷题

一、数组 88. 合并两个有序数组 public void merge(int[] nums1, int m, int[] nums2, int n) {int p1 0, p2 0;int[] sorted new int[m n];while (p1 < m || p2 < n) {int current;if (p1 m) {current nums2[p2];} else if (p2 n) {current nums1[p1];} else i…

每日一题——数字翻转

题目; 这道题看似是很简单的回文数 实则就是很简单的回文数 但是需要注意的一点是负数 可以在开头就进行判断&#xff0c;如果N<0的话就令N-N&#xff0c;将所有数都转成正数就好办了 上代码&#xff1a; #include <iostream> #include<string> #include<…

Linux 目录结构结构

Linux 目录结构结构 概念 Linux 没有 C、D、E...盘符&#xff0c;只有一个目录树。通过挂载&#xff0c;将不同的磁盘挂载到目录树下&#xff0c;通过目录访问磁盘。 ‍ 不同目录的作用 目录存放内容/作用​/​根目录&#xff0c;目录树的起点&#xff0c;存放所有文件。​…

4核16G服务器价格腾讯云PK阿里云

4核16G服务器租用优惠价格26元1个月&#xff0c;腾讯云轻量4核16G12M服务器32元1个月、96元3个月、156元6个月、312元一年&#xff0c;阿腾云atengyun.com分享4核16服务器租用费用价格表&#xff0c;阿里云和腾讯云详细配置报价和性能参数表&#xff1a; 腾讯云4核16G服务器价…

【前端工程化面试题】简单说一下 vite 的原理

Vite 是一种新一代的前端构建工具&#xff0c;它的原理主要基于两个核心概念&#xff1a;ES 模块和服务器端模块打包&#xff08;Server-Side Module Bundling&#xff0c;简称 SSMB&#xff09;。 ES 模块&#xff08;ES Modules&#xff09;&#xff1a;Vite 利用了现代浏览器…

蓝桥杯基础知识8 list

蓝桥杯基础知识8 list 01 list 的定义和结构 lits使用频率较低&#xff0c;是一种双向链表容器&#xff0c;是标准模板库&#xff08;STL&#xff09;提供的一种序列容器&#xff0c;lsit容器以节点&#xff08;node&#xff09;的形式存储元素&#xff0c;使用指针将这些节点链…

如何优化覆盖索引

覆盖索引&#xff08;Covering Index&#xff09;是指一个索引包含了查询中所需的所有字段的索引。这意味着查询可以仅通过索引来获取数据&#xff0c;而无需访问数据表中的行。当数据库执行查询时&#xff0c;如果可以直接在索引中找到需要的所有信息&#xff0c;那么就能显著…

计算机网络概述习题拾遗

学习目标&#xff1a; 自下而上第一个提供端到端服务的层次 路由器、交换机、集线器实现的功能层 TCP/IP体系结构的网络接口层对应OSI体系结构的哪两个层次 分组数量对总时延的影响 如果这篇文章对您有帮助&#xff0c;麻烦点赞关注支持一下动力猿吧&#xff01; 学习内容…

4核16g云服务器多少钱?

4核16G服务器租用优惠价格26元1个月&#xff0c;腾讯云轻量4核16G12M服务器32元1个月、96元3个月、156元6个月、312元一年&#xff0c;阿腾云atengyun.com分享4核16服务器租用费用价格表&#xff0c;阿里云和腾讯云详细配置报价和性能参数表&#xff1a; 腾讯云4核16G服务器价…

倒计时55天

(0条未读通知) 牛客竞赛_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞赛OJ (nowcoder.com) a. #include<bits/stdc.h> using namespace std; #define int long long const int N2e56; const int inf0x3f3f3f3f; void solve() {int n,cn10,cn20;string s,str1"…

MyBatisPlus - 润物无声、效率至上、丰富功能

目录 一、简介 1.1、为什么要使用 MybatisPlus 二、使用指南 2.1、依赖 2.2、配置 2.3、常用注解 2.4、BaseMapper 的使用 2.4.1、定义 Mapper 接口 2.4.2、基于 QueryWrapper 的查询&#xff08;不推荐&#xff09; 2.4.3、基于 UpdateWrapper 的修改&#xff08;不…

Sentinel 流控-链路模式

链路模式 A B C 三个服务 A 调用 C B 调用 C C 设置流控 ->链路模式 -> 入口资源是 A A、B 服务 package com.learning.springcloud.order.controller;import com.learning.springcloud.order.service.BaseService; import org.springframework.beans.factory.annotatio…