当前位置： 首页 > news >正文

vue3扩展echart封装为组件库-快速复用

news 2026/5/21 7:34:24

ECharts

ECharts，全称Enterprise Charts，是一款由百度团队开发并开源，后捐赠给Apache基金会的纯JavaScript图表库。它提供了直观、生动、可交互、可个性化定制的数据可视化图表，广泛应用于数据分析、商业智能、网页开发等领域。以下是关于ECharts的详细介绍：

ECharts的特点

  1. 丰富的图表类型：ECharts支持包括折线图、柱状图、散点图、饼图、盒形图、地图、热力图、雷达图、K线图等在内的多种图表类型，满足不同的数据可视化需求。
  2. 多坐标系支持：ECharts支持直角坐标系（Cartesian）、极坐标系（Polar）和地理坐标系（Geo）等多种坐标系，为图表提供了更灵活的布局和展示方式。
  3. 高度可定制：ECharts允许用户通过丰富的配置项来自定义图表的样式、颜色、交互等，实现高度个性化的数据可视化效果。
  4. 良好的兼容性：ECharts可以流畅地运行在PC和移动设备上，并兼容当前绝大部分浏览器，如IE6/7/8/9/10/11、Chrome、Firefox、Safari等。

ECharts的使用方式

  1. 引入ECharts：用户可以通过npm、CDN或GitHub等方式引入ECharts。
  2. 准备一个DOM容器：在HTML中定义一个具有宽高的<div>容器，用于承载图表。
  3. 初始化ECharts实例：使用echarts.init(dom)方法初始化一个ECharts实例，其中dom是前面准备的DOM容器的引用。
  4. 配置图表选项：通过编写一个包含图表配置项的对象（通常称为option），来指定图表的类型、数据、样式等。
  5. 设置图表选项：使用ECharts实例的setOption(option)方法，将配置好的option应用到图表上，实现图表的渲染。

ECharts的示例

以下是一个简单的ECharts柱状图示例：

​

<!DOCTYPE html>  
<html>  
<head>  <meta charset="utf-8">  <title>ECharts 示例</title>  <!-- 引入 ECharts -->  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>  
</head>  
<body>  <!-- 准备一个具备大小（宽高）的Dom -->  <div id="main" style="width: 600px;height:400px;"></div>  <script type="text/javascript">  // 基于准备好的dom，初始化echarts实例  var myChart = echarts.init(document.getElementById('main'));  // 指定图表的配置项和数据  var option = {  title: {  text: 'ECharts 示例'  },  tooltip: {},  legend: {  data:['销量']  },  xAxis: {  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]  },  yAxis: {},  series: [{  name: '销量',  type: 'bar',  data: [5, 20, 36, 10, 10, 20]  }]  };  // 使用刚指定的配置项和数据显示图表。  myChart.setOption(option);  </script>  
</body>  
</html>

vue3扩展echart封装为组件库

在Vue 3中扩展ECharts并将其封装为可复用的组件库：

封装ECharts组件

首先，你需要创建一个ECharts组件，该组件接受必要的props（如选项、宽度、高度等。

<template><div ref="chartRef" :style="{ width, height }"></div>
</template><script setup name="chart">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';import { useResizeObserver, useVModel } from '@vueuse/core';const props = defineProps({modelValue: {type: Object,default: {},},height: {type: String,default: '100%',},width: {type: String,default: '100%',},
});const emit = defineEmits(['update:modelValue']);
const data = useVModel(props, 'modelValue', emit);
const chartRef = ref();
let chart = ref();const initChart = () => {if (chartRef.value) {chart = echarts.init(chartRef.value);chart.setOption(data.value);}
};// 定义一个函数来处理尺寸变化
const handleResize = () => {if (chart) {setTimeout(() => {chart.resize();}, 100);}
};const setOption = (option) => {if (chartRef.value) {chart = echarts.init(chartRef.value);chart.setOption(option);}
};onMounted(() => {initChart();// 监听窗口大小变化if (chartRef.value) {useResizeObserver(chartRef.value.parentNode, handleResize);}
});
const getChart = () => {return chart;
};
defineExpose({getChart,setOption,
});
</script>

组件调用

<template><div class="container"><div style="height: 214px" class="flex diygw-col-12"><diy-echart ref="echartRef" v-model="echartOpts" /></div><div style="height: 214px" class="flex diygw-col-12"><diy-echart ref="echart1Ref" v-model="echart1Opts" /></div><div class="clearfix"></div></div>
</template><script setup name="index">import { ElMessageBox, ElMessage } from 'element-plus';import { ref, toRefs, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue';import { useRouter, useRoute } from 'vue-router';import { storeToRefs } from 'pinia';import { useUserInfo } from '@/stores/userInfo';import DiyEchart from '@/components/echart/index.vue';const stores = useUserInfo();const { userInfos } = storeToRefs(stores);const { proxy } = getCurrentInstance();const router = useRouter();const route = useRoute();const globalOption = ref(route.query);const getParamData = (e, row) => {row = row || {};let dataset = e.currentTarget ? e.currentTarget.dataset : e;if (row) {dataset = Object.assign(dataset, row);}return dataset;};const navigateTo = (e, row) => {let dataset = getParamData(e, row);let { type } = dataset;if ((type == 'page' || type == 'inner' || type == 'href') && dataset.url) {router.push({path: (dataset.url.startsWith('/') ? '' : '/') + dataset.url,query: dataset});} else {ElMessage.error('待实现点击事件');}};const state = reactive({userInfo: userInfos.value,echartOpts: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }] },echart1Opts: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }});const { userInfo, echart1Opts, echartOpts } = toRefs(state);const init = async () => {};// 页面加载时onMounted(async () => {await init();});// 页面卸载时onUnmounted(() => {});
</script><style lang="scss" scoped>.container {font-size: 12px;}
</style>

相关文章：

vue3扩展echart封装为组件库-快速复用

ECharts ECharts&#xff0c;全称Enterprise Charts&#xff0c;是一款由百度团队开发并开源&#xff0c;后捐赠给Apache基金会的纯JavaScript图表库。它提供了直观、生动、可交互、可个性化定制的数据可视化图表&#xff0c;广泛应用于数据分析、商业智能、网页开发等领域。以…...

编程日记 2024/9/23 18:16:52

随机掉落的项目足迹：Vue3 + wangEditor5富文本编辑器——toolbar.getConfig() 查看工具栏的默认配置

问题引入 小提示&#xff1a;问题引入是一个讲故事的废话环节&#xff0c;各位小伙伴可以直接跳到第二大点&#xff1a;问题解决 我的项目不需要在富文本编辑器中引入添加代码块的功能&#xff0c;于是我寻思在工具栏上把操作代码的菜单删一删 于是我来到官网文档工具栏配置 …...

编程日记 2024/9/23 18:14:50

更新 Git 软件

更新 Git 软件本身是指将你当前安装的 Git 版本升级到最新版本。不同的操作系统有不同的更新方法。以下是针对 Windows、macOS 和 Linux 的 Git 更新步骤&#xff1a; Windows 检查当前版本&#xff1a; git --version访问官网下载最新版本&#xff1a; 访问 Git 官方网站 (ht…...

编程日记 2024/9/23 18:12:48

Keil根据map文件确定单片机代码存储占用flash情况

可以从map文件中查看得知&#xff0c;代码占用内存情况大概为35KB,而在在线仿真时&#xff0c;可以看到在flash的0x8008F64地址前均有数据&#xff0c;是代码数据&#xff0c;8F64(HEX)36708(DEC),36708/102335,刚好35。因此&#xff0c;要想操作读写flash&#xff0c;必须在不…...

编程日记 2024/9/23 18:11:47

ByteTrack多目标跟踪流程图

ByteTrack多目标跟踪流程图 点个赞吧&#xff0c;谢谢。...

编程日记 2024/9/23 18:09:44

什么是L2范数

定义&#xff1a; 在数学和计算中&#xff0c;L2 范数是一种用于测量向量长度或大小的方法&#xff0c;也被称为欧几里得范数。对于一个 n 维向量 x ( x 1 , x 2 , … , x n ) \mathbf{x} (x_1, x_2, \dots, x_n) x(x1​,x2​,…,xn​)&#xff0c;其 L2 范数定义为&#x…...

编程日记 2024/9/23 18:08:43

Scrapy爬虫IP代理池：提升爬取效率与稳定性

在互联网时代&#xff0c;数据就是新的黄金。无论是企业还是个人&#xff0c;数据的获取和分析能力都显得尤为重要。而在众多数据获取手段中&#xff0c;使用爬虫技术无疑是一种高效且广泛应用的方法。然而&#xff0c;爬虫在实际操作中常常会遇到IP被封禁的问题。为了解决这个…...

编程日记 2024/9/23 18:06:41

信息技术（IT）行业的发展

近年来&#xff0c;信息技术&#xff08;IT&#xff09;行业的发展呈现出前所未有的活力和潜力。随着全球数字化转型的加速&#xff0c;IT行业正逐步成为推动社会经济发展的重要引擎。无论是互联网、大数据、人工智能&#xff0c;还是云计算、物联网&#xff0c;这些新兴技术都…...

编程日记 2024/9/23 18:05:40

C++primer第十一章使用类（矢量随机游走实例）

操作符重载 操作符重载(operator overoading)是一种形式的 C多态。 第8章介绍了C是如何使用户能够定义多个名称相同但特征标(参数列表)不同的函数的。这被称为函数重载(function overloading)或函数多态(functional polymorphism)&#xff0c;旨在让您能够用同名的函数来完成…...

编程日记 2024/9/23 18:04:39

服务器为什么会受到网络攻击？

随着科技的 快速发展&#xff0c;企业也开展了越来越多的线上业务&#xff0c;但同时也遭受到各种各样的网络攻击&#xff0c;那服务器为什么会受到网络攻击呢&#xff1f;下面就让小编带领大家一起来了解一下吧&#xff01; 首先企业中服务器被攻击的原因有很多&#xff0c;主…...

编程日记 2024/9/23 18:03:38

IDA Pro基本使用

IDA Pro基本使用 1.DllMain的地址是什么? 打开默认在的位置1000D02E就是DllMain地址 按空格键可以看到图形化界面选择options、general勾选对应的选项在图像化也能看到 2.使用Imports 窗口并浏览到 gethostbyname&#xff0c;导入函数定位到什么地址? 这里可以打开Impo…...

编程日记 2024/9/23 18:01:36

Day.js时间插件的安装引用与常用方法大全

&#x1f680; 个人简介&#xff1a;某大型国企资深软件研发工程师&#xff0c;信息系统项目管理师、CSDN优质创作者、阿里云专家博主&#xff0c;华为云云享专家&#xff0c;分享前端后端相关技术与工作常见问题~ &#x1f49f; 作 者&#xff1a;码喽的自我修养&#x1f9…...

编程日记 2024/9/23 18:00:35

aws 容器镜像仓库操作

aws 容器镜像仓库产品叫ECR&#xff0c;官方文档参考&#xff1a;Amazon Elastic Container Registry。 1&#xff09;账号认证 # 配置aws命令 $ aws configure set aws_access_key_id ${ak} $ aws configure set aws_secret_access_key ${sk} 2&#xff09;镜像仓库登陆 #…...

编程日记 2024/9/23 17:59:34

学习记录：js算法（四十一）： 基于时间的键值存储

文章目录 基于时间的键值存储网上思路 总结 基于时间的键值存储 设计一个基于时间的键值数据结构&#xff0c;该结构可以在不同时间戳存储对应同一个键的多个值&#xff0c;并针对特定时间戳检索键对应的值。 实现 TimeMap 类&#xff1a; TimeMap() 初始化数据结构对象void se…...

编程日记 2024/9/23 17:54:28

C语言 | Leetcode C语言题解之第424题替换后的最长重复字符

题目&#xff1a; 题解&#xff1a; int characterReplacement(char* s, int k) {int num[26];memset(num, 0, sizeof(num));int n strlen(s);int maxn 0;int left 0, right 0;while (right < n) {num[s[right] - A];maxn fmax(maxn, num[s[right] - A]);if (right - …...

编程日记 2024/9/23 17:53:26

大数据时代的PDF解析：技术与挑战

在大数据时代&#xff0c;海量信息以不同格式存储&#xff0c;其中 PDF 文件凭借其广泛应用成为了各种业务场景下的主要文档格式。无论是政府文件、企业报告&#xff0c;还是学术论文和技术文档&#xff0c;PDF 都是信息交流的重要媒介。然而&#xff0c;随着信息的爆炸式增长&…...

编程日记 2024/9/23 17:51:24

《nmap 命令全解析：网络探测与安全扫描的利器》

文章目录 一、引言二、nmap 命令概述三、nmap 基本用法&#xff08;一&#xff09;安装 nmap&#xff08;二&#xff09;简单扫描示例 四、nmap 常见参数&#xff08;一&#xff09;-sS&#xff08;TCP SYN 扫描&#xff09;&#xff08;二&#xff09;-sT&#xff08;TCP 连接…...

编程日记 2024/9/23 17:50:23

2024年华为OD机试真题-斗地主之顺子-Python-OD统一考试（E卷）

最新华为OD机试考点合集：华为OD机试2024年真题题库（E卷+D卷+C卷）_华为od机试题库-CSDN博客 每一题都含有详细的解题思路和代码注释，精选c++、JAVA、Python三种语言解法。帮助每一位考生轻松、高效刷题。订阅后永久可看，持续跟新。 题目描述 在斗地主只扑克牌游戏中，…...

编程日记 2024/9/23 17:49:22

亲测有效，长期有效的RTSP流地址公网RTSP地址，各种类型的视频源

我们经常需要做一些实时视频流的测试&#xff0c;但是手边又没有办法及时弄到一个摄像机&#xff0c;我们经常会去搜索一下“公网RTSP地址”&#xff0c;但是大部分现在都失效了&#xff0c;有什么办法能够让我们快速构建一个RTSP流&#xff0c;点几下就能直接用&#xff1f; …...

编程日记 2024/9/23 17:47:20

Excel常用函数大全

Excel常用函数介绍与示例应用 在Excel中&#xff0c;函数是进行数据处理和分析的强大工具。对于新手来说&#xff0c;掌握一些基本的函数使用方法能够大大提升工作效率。以下是一份通俗易懂、适合新手的Excel函数使用方法总结&#xff1a; 1. 求和函数&#xff08;SUM&#x…...

编程日记 2024/9/23 17:45:16

七牛云：批量将标准存储文件转为归档直读存储

&#x1f4cb; 整体流程图 下载安装 qshell → 配置密钥 → 列出符合条件的文件 → 生成批量转换清单 → 执行转换建议先看看不同类型有何区别&#xff0c;选择适合自己的&#xff1a;存储类型_产品简介_对象存储 - 七牛开发者中心https://developer.qiniu.com/kodo/3956/kodo…...

编程新知 2026/5/21 7:02:30

电动汽车高压系统狭窄空间高精度电流电压测量方案解析

1. 项目概述&#xff1a;当高压测量遇上“螺蛳壳里做道场”在电动汽车的研发测试领域&#xff0c;尤其是实车道路测试阶段&#xff0c;有一个场景让很多工程师头疼不已&#xff1a;如何在发动机舱、底盘或电池包附近那些错综复杂、空间逼仄的线束通道里&#xff0c;精准地测量高…...

编程新知 2026/5/21 6:45:00

美团春招笔试“小美的朋友关系”全网无AC？我用逆向并查集搞定它（附完整代码）

逆向并查集&#xff1a;破解美团笔试"小美的朋友关系"难题 大厂算法笔试中&#xff0c;总有一两道题能卡住绝大多数求职者。今年美团春招的"小美的朋友关系"就是这样一道"拦路虎"——全网找不到AC代码&#xff0c;无数人在超时和错误答案中挣扎。…...

编程新知 2026/5/21 5:45:33

从SE到Dual-Attention：手把手教你为YOLOv8或ResNet模型‘加装’注意力模块提升指标

从SE到Dual-Attention&#xff1a;手把手教你为YOLOv8或ResNet模型‘加装’注意力模块提升指标 在计算机视觉领域&#xff0c;注意力机制已成为提升模型性能的"秘密武器"。不同于完全重构网络架构&#xff0c;注意力模块的魅力在于其即插即用的特性——就像为汽车加装…...

编程新知 2026/5/21 5:37:31

CANN/asc-devkit asc_any函数

asc_any 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言&#xff0c;原生支持C和C标准规范&#xff0c;主要由类库和语言扩展层构成&#xff0c;提供多层级API&#xff0c;满足多维场景算子开发诉求。 项目地址: https://gitcode.com/ca…...

编程新知 2026/5/21 4:22:35

如何构建高效的Azure事件驱动架构：Go SDK Messaging模块的实时消息处理指南 [特殊字符]

如何构建高效的Azure事件驱动架构&#xff1a;Go SDK Messaging模块的实时消息处理指南 &#x1f680; 【免费下载链接】azure-sdk-for-go This repository is for active development of the Azure SDK for Go. For consumers of the SDK we recommend visiting our public de…...

编程新知 2026/5/21 4:16:33

嵌入式核心板选型指南：从单核到四核的精准配置与实战优化

1. 项目概述&#xff1a;从“固定套餐”到“自助餐”的嵌入式核心板选型变革最近在规划一个工业HMI项目&#xff0c;主控选型时又翻开了飞凌嵌入式的产品手册。看到AM62x系列核心板配置新增了单核、双核、四核的选项&#xff0c;第一反应是&#xff1a;这路子对了。在嵌入式开发…...

编程新知 2026/5/21 4:03:07

AOCODARC-F7MINI飞控固件编译踩坑记：从‘make arm_sdk_install’失败到成功编译

AOCODARC-F7MINI飞控固件编译实战&#xff1a;从工具链安装到烧录全流程解析 1. 环境准备与工具链安装 编译BetaFlight固件最令人头疼的环节往往不是代码本身&#xff0c;而是环境配置。以Ubuntu 20.04为例&#xff0c;我们需要先解决两个核心问题&#xff1a;基础编译环境和AR…...

编程新知 2026/5/21 3:35:58

从一颗0603电阻的封装，聊聊PADS里那些容易被忽略的‘隐形’图层（丝印、装配、阻焊）

从一颗0603电阻的封装&#xff0c;聊聊PADS里那些容易被忽略的‘隐形’图层 在PCB设计领域&#xff0c;封装设计往往被视为"简单"的基础工作。许多工程师认为&#xff0c;只要焊盘位置正确、丝印轮廓大致匹配&#xff0c;一个封装就算完成了。直到某天&#xff0c;工…...

编程新知 2026/5/21 3:02:10

毕业设计 基于python的答题卡识别评分系统

文章目录 0 简介课题简介什么是机器视觉实现步骤详细设计图片读取canny边缘检测四点变换 划出区域处理选择题区域提取选项轮廓判断选项 读取正确结果 最后 0 简介 今天学长向大家分享一个毕业设计项目 毕业设计 基于python的答题卡识别评分系统 项目运行效果&#xff1a; 毕…...

编程新知 2026/5/21 2:00:36