vue3扩展echart封装为组件库-快速复用
ECharts
ECharts,全称Enterprise Charts,是一款由百度团队开发并开源,后捐赠给Apache基金会的纯JavaScript图表库。它提供了直观、生动、可交互、可个性化定制的数据可视化图表,广泛应用于数据分析、商业智能、网页开发等领域。以下是关于ECharts的详细介绍:
ECharts的特点
- 丰富的图表类型:ECharts支持包括折线图、柱状图、散点图、饼图、盒形图、地图、热力图、雷达图、K线图等在内的多种图表类型,满足不同的数据可视化需求。
- 多坐标系支持:ECharts支持直角坐标系(Cartesian)、极坐标系(Polar)和地理坐标系(Geo)等多种坐标系,为图表提供了更灵活的布局和展示方式。
- 高度可定制:ECharts允许用户通过丰富的配置项来自定义图表的样式、颜色、交互等,实现高度个性化的数据可视化效果。
- 良好的兼容性:ECharts可以流畅地运行在PC和移动设备上,并兼容当前绝大部分浏览器,如IE6/7/8/9/10/11、Chrome、Firefox、Safari等。
ECharts的使用方式
- 引入ECharts:用户可以通过npm、CDN或GitHub等方式引入ECharts。
- 准备一个DOM容器:在HTML中定义一个具有宽高的<div>容器,用于承载图表。
- 初始化ECharts实例:使用echarts.init(dom)方法初始化一个ECharts实例,其中dom是前面准备的DOM容器的引用。
- 配置图表选项:通过编写一个包含图表配置项的对象(通常称为option),来指定图表的类型、数据、样式等。
- 设置图表选项:使用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,全称Enterprise Charts,是一款由百度团队开发并开源,后捐赠给Apache基金会的纯JavaScript图表库。它提供了直观、生动、可交互、可个性化定制的数据可视化图表,广泛应用于数据分析、商业智能、网页开发等领域。以…...

随机掉落的项目足迹:Vue3 + wangEditor5富文本编辑器——toolbar.getConfig() 查看工具栏的默认配置
问题引入 小提示:问题引入是一个讲故事的废话环节,各位小伙伴可以直接跳到第二大点:问题解决 我的项目不需要在富文本编辑器中引入添加代码块的功能,于是我寻思在工具栏上把操作代码的菜单删一删 于是我来到官网文档工具栏配置 …...
更新 Git 软件
更新 Git 软件本身是指将你当前安装的 Git 版本升级到最新版本。不同的操作系统有不同的更新方法。以下是针对 Windows、macOS 和 Linux 的 Git 更新步骤: Windows 检查当前版本: git --version访问官网下载最新版本: 访问 Git 官方网站 (ht…...

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

ByteTrack多目标跟踪流程图
ByteTrack多目标跟踪流程图 点个赞吧,谢谢。...
什么是L2范数
定义: 在数学和计算中,L2 范数是一种用于测量向量长度或大小的方法,也被称为欧几里得范数。对于一个 n 维向量 x ( x 1 , x 2 , … , x n ) \mathbf{x} (x_1, x_2, \dots, x_n) x(x1,x2,…,xn),其 L2 范数定义为&#x…...

Scrapy爬虫IP代理池:提升爬取效率与稳定性
在互联网时代,数据就是新的黄金。无论是企业还是个人,数据的获取和分析能力都显得尤为重要。而在众多数据获取手段中,使用爬虫技术无疑是一种高效且广泛应用的方法。然而,爬虫在实际操作中常常会遇到IP被封禁的问题。为了解决这个…...
信息技术(IT)行业的发展
近年来,信息技术(IT)行业的发展呈现出前所未有的活力和潜力。随着全球数字化转型的加速,IT行业正逐步成为推动社会经济发展的重要引擎。无论是互联网、大数据、人工智能,还是云计算、物联网,这些新兴技术都…...

C++primer第十一章使用类(矢量随机游走实例)
操作符重载 操作符重载(operator overoading)是一种形式的 C多态。 第8章介绍了C是如何使用户能够定义多个名称相同但特征标(参数列表)不同的函数的。这被称为函数重载(function overloading)或函数多态(functional polymorphism),旨在让您能够用同名的函数来完成…...
服务器为什么会受到网络攻击?
随着科技的 快速发展,企业也开展了越来越多的线上业务,但同时也遭受到各种各样的网络攻击,那服务器为什么会受到网络攻击呢?下面就让小编带领大家一起来了解一下吧! 首先企业中服务器被攻击的原因有很多,主…...

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

Day.js时间插件的安装引用与常用方法大全
🚀 个人简介:某大型国企资深软件研发工程师,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端后端相关技术与工作常见问题~ 💟 作 者:码喽的自我修养ǹ…...
aws 容器镜像仓库操作
aws 容器镜像仓库产品叫ECR,官方文档参考:Amazon Elastic Container Registry。 1)账号认证 # 配置aws命令 $ aws configure set aws_access_key_id ${ak} $ aws configure set aws_secret_access_key ${sk} 2)镜像仓库登陆 #…...
学习记录:js算法(四十一): 基于时间的键值存储
文章目录 基于时间的键值存储网上思路 总结 基于时间的键值存储 设计一个基于时间的键值数据结构,该结构可以在不同时间戳存储对应同一个键的多个值,并针对特定时间戳检索键对应的值。 实现 TimeMap 类: TimeMap() 初始化数据结构对象void se…...

C语言 | Leetcode C语言题解之第424题替换后的最长重复字符
题目: 题解: 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 - …...
大数据时代的PDF解析:技术与挑战
在大数据时代,海量信息以不同格式存储,其中 PDF 文件凭借其广泛应用成为了各种业务场景下的主要文档格式。无论是政府文件、企业报告,还是学术论文和技术文档,PDF 都是信息交流的重要媒介。然而,随着信息的爆炸式增长&…...
《nmap 命令全解析:网络探测与安全扫描的利器》
文章目录 一、引言二、nmap 命令概述三、nmap 基本用法(一)安装 nmap(二)简单扫描示例 四、nmap 常见参数(一)-sS(TCP SYN 扫描)(二)-sT(TCP 连接…...
2024年华为OD机试真题-斗地主之顺子-Python-OD统一考试(E卷)
最新华为OD机试考点合集:华为OD机试2024年真题题库(E卷+D卷+C卷)_华为od机试题库-CSDN博客 每一题都含有详细的解题思路和代码注释,精选c++、JAVA、Python三种语言解法。帮助每一位考生轻松、高效刷题。订阅后永久可看,持续跟新。 题目描述 在斗地主只扑克牌游戏中,…...

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

Excel常用函数大全
Excel常用函数介绍与示例应用 在Excel中,函数是进行数据处理和分析的强大工具。对于新手来说,掌握一些基本的函数使用方法能够大大提升工作效率。以下是一份通俗易懂、适合新手的Excel函数使用方法总结: 1. 求和函数(SUM&#x…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...

如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...

2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
git: early EOF
macOS报错: Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

FFmpeg avformat_open_input函数分析
函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

若依登录用户名和密码加密
/*** 获取公钥:前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...