Vue3实战笔记(45)—VUE3封装一些echarts常用的组件,附源码

文章目录

  • 前言
  • 一、柱状图框选
  • 二、折线图堆叠
  • 总结


前言

日前使用hooks的方式封装组件,在我使用复杂的图标时候遇到了些问题,预想在onMounted中初始化echarts,在使用hooks的时候,组件没有渲染完,使用实例会出现各种各样的问题,并且在hooks中使用一些外部属性也属实遇到了些麻烦,先用蠢方法直接封装两个插件做dashboard用,后面有时间重新完善封装echarts。


一、柱状图框选

柱状图框选,新建组件EChartsBarBrush.vue:


<template><div ref="chartContainer" style="width: 100%; height: 100%"></div>
</template><script setup lang="ts" name="">
import useECharts from '@/hooks/useECharts';
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';const chartContainer = ref(null);let xAxisData: string[] = [];
let data1: number[] = [];
let data2: number[] = [];
let data3: number[] = [];
let data4: number[] = [];for (let i = 0; i < 10; i++) {xAxisData.push('Class' + i);data1.push(+(Math.random() * 2).toFixed(2));data2.push(+(Math.random() * 5).toFixed(2));data3.push(+(Math.random() + 0.3).toFixed(2));data4.push(+Math.random().toFixed(2));
}var emphasisStyle = {itemStyle: {shadowBlur: 10,shadowColor: 'rgba(0,0,0,0.3)'}
};const options = ref({legend: {data: ['bar', 'bar2', 'bar3', 'bar4'],left: '10%'},brush: {toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],xAxisIndex: 0},toolbox: {feature: {magicType: {type: ['stack']},dataView: {}}},tooltip: {},xAxis: {data: xAxisData,name: 'X Axis',axisLine: { onZero: true },splitLine: { show: false },splitArea: { show: false }},yAxis: {},grid: {bottom: 100},series: [{name: 'bar',type: 'bar',stack: 'one',emphasis: emphasisStyle,data: data1},{name: 'bar2',type: 'bar',stack: 'one',emphasis: emphasisStyle,data: data2},{name: 'bar3',type: 'bar',stack: 'two',emphasis: emphasisStyle,data: data3},{name: 'bar4',type: 'bar',stack: 'two',emphasis: emphasisStyle,data: data4}]
});
// const chartInstance = useECharts(chartContainer, options);
onMounted(() => {// 初始化 ECharts 实例const chartInstance = echarts.init(chartContainer.value);// 设置 ECharts 配置项chartInstance.setOption(options.value);chartInstance.on('brushSelected', function (params: any) {var brushed = [];var brushComponent = params.batch[0];for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {var rawIndices = brushComponent.selected[sIdx].dataIndex;brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));}chartInstance.setOption({title: {backgroundColor: '#333',text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),bottom: 0,right: '10%',width: 100,textStyle: {fontSize: 12,color: '#fff'}}});
});// 监听窗口大小变化,自动调整图表大小window.addEventListener('resize', () => chartInstance.resize());});</script><style lang='scss' scoped>
</style>

在这里插入图片描述

二、折线图堆叠

折线图堆叠,新建EChartSlineStack.vue


<template><div ref="chartContainer" style="width: 100%; height: 100%"></div>
</template><script setup lang="ts" name="">
import { ref } from 'vue';
import useECharts from '@/hooks/useECharts';const chartContainer = ref(null);
const options = ref({title: {text: 'Stacked Line'},tooltip: {trigger: 'axis'},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}]
});const chartInstance = useECharts(chartContainer, options);// 你可以在这里根据需要操作 ECharts 实例,例如更新数据
// chartInstance.value.setOption({...})
</script><style lang='scss' scoped>
</style>

在这里插入图片描述


总结

为啥这两天封装了好几个echarts组件呢,上头了一样,通过封装ECharts组件,可以将图表的基本配置、数据处理、事件处理等逻辑封装在一个组件中,从而实现代码的复用。这样,在需要使用相同类型的图表时,只需引入该组件,而无需重复编写相同的代码。明天就体验一下好处。

得意勿恣意奢侈,失意勿抑郁失措。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/841343.shtml

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

相关文章

Qt Creator(1)【概述篇】

阅读导航 引言一、Qt概述1. 什么是Qt2. Qt的发展史3. Qt支持的平台4. Qt的优点5. Qt的应用场景 二、Qt下载安装 引言 在探索编程和软件开发的旅程中&#xff0c;我们已经奠定了坚实的基础&#xff0c;通过学习C语言和C&#xff0c;我们不仅掌握了结构化编程和面向对象编程的核…

HIVE3.1.3+ZK+Kerberos+Ranger2.4.0高可用集群部署

目录 一、集群规划 二、介质下载 三、基础环境准备 1、解压文件 2、配置环境变量 四、配置zookeeper 1、创建主体 2、修改zoo.cfg 3、新增jaas.conf 4、新增java.env 5、重启ZK 6、验证ZK 五、配置元数据库 六、安装HIVE 1、创建Hiver的kerberso主体 2…

网站笔记:huggingface model memory calculator

Model Memory Utility - a Hugging Face Space by hf-accelerate 这个工具可以计算在 Hugging Face Hub上托管的大型模型训练和执行推理时所需的vRAM内存量。模型所需的最低推荐vRAM内存量表示为“最大层”的大小&#xff0c;模型的训练大约是其大小的4倍&#xff08;针对Adam…

LeetCode 第399场周赛个人题解

100323. 优质数对的总数 I 原题链接 100323. 优质数对的总数 I 思路分析 签到题 AC代码 class Solution:def numberOfPairs(self, nums1: List[int], nums2: List[int], k: int) -> int:n, m len(nums1), len(nums2)ret 0for i in range(n):for j in range(m):if nu…

关于构建生成式AI产品的思考

在过去的六个月里&#xff0c;我们 LinkedIn 的团队一直在努力开发一种新的人工智能体验。我们希望重新构想我们的会员如何进行求职和浏览专业内容。 生成式人工智能的爆炸式增长让我们停下来思考一年前不可能实现的事情。我们尝试了许多想法&#xff0c;但都没有真正实现&…

1.2 程序员职业发展

目录 1 程序员职业发展方向 2 计算机研究生为何青睐AI赛道 1 程序员职业发展方向 2 计算机研究生为何青睐AI赛道 计算机类研究生&#xff0c;大部分以人工智能作为主赛道&#xff0c;原因如下&#xff1a; 广阔的就业前景&#xff1a;人工智能是当今科技发展的前沿领域&…

7.Redis之String编码方式应用场景业务

1.内部编码 字符串类型的内部编码有 3 种&#xff1a; • int&#xff1a;8 个字节&#xff08;64位&#xff09;的⻓整型。 • embstr&#xff1a;⼩于等于 39 个字节的字符串。压缩字符串.适用于表示比较短的字符串。 • raw&#xff1a;⼤于 39 个字节的字符串。普通字…

Java的线程的使用

一.两种创建线程的方式 1.继承Thread类&#xff08;匿名内部类&#xff09; 创建方式&#xff1a; 1.定义一个子类继承Thread&#xff0c;重写run方法 2.创建子类对象&#xff0c; 3.调用子类对象的start方法&#xff08;启动还是执行的run方法&#xff09; 优缺点&#x…

公安知识学习与题目练习系统

一、系统概述 系统采用C用户小程序端、管理员Web端架构。通过UniappVueSpringboot主流技术实现。具体功能分为&#xff0c;管理侧&#xff1a;可以维护学习知识点、更新知识点详情&#xff1b;C端用户&#xff1a;可以学习知识点、在线刷题练习的功能。次系统在公安专业知识学习…

绘唐科技绘唐ai工具邀请码

绘唐科技绘唐ai工具邀请码 绘唐AI工具 https://qvfbz6lhqnd.feishu.cn/wiki/QBr4wOAz2ilF4NknrqbcoKRhn2c TensorFlow是一个开源的机器学习框架,由Google开发并维护。它提供了一个灵活且高效的接口,用于构建和训练各种机器学习模型。 TensorFlow的基本概念包括: 1. 张量(…

牛客网刷题 | BC99 正方形图案

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 KiKi学习了循环&am…

使用Java和XxlCrawler获取各城市月度天气情况实践

目录 前言 一、历史数据获取 1、关于天气后报 2、信息界面分析 二、数据的提取开发 1、PageVo的定义 2、属性定义 3、实际信息抓取 三、信息抓取调试以及可能的问题 1、信息获取成果 2、关于超时的问题 四、总结 前言 这篇文章主要来源于一个我们家小朋友的一个作业…

计算机基础概论:构筑数字社会的硬件基础与交互技术

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f3af; 引言&#x1f4bb; 什么是计算机&#xff1f;&#x1f331; 计算机的起源与发展&#x1f6e0;️ 电脑硬件的五大核心组件1. 中央处理器 (CPU) - 智慧的心脏2. 随机存取内存 (RAM) - 快速的记忆体3. 存储设备 …

安卓手机听书的各种免费方案

categories: Tips tags: Tips 写在前面 最近 Tencent 突然给微信读书上限制了, 普通用户一个月内仅能导入 3 本书, 这就让经常在 weread 上面听书入眠的我很无奈了. 折腾一下备选方案吧, 肯定是免费优先咯. 下面主要从支持 tts 的阅读器/ tts 免费中文引擎两个角度来讲. r…

Linux驱动(3)- LInux USB驱动层次

在Linux系统中&#xff0c;提供了主机侧和设备侧USB驱动框架。 从主机侧&#xff0c;需要编写USB驱动包括主机控制器驱动&#xff0c;设备驱动两类&#xff0c;USB 主机控制驱动程序控制插入其中的USB设备。 USB设备驱动程序控制该设备如何作为从设备与主机进行通信。 1.主机…

Attention相关问题笔试解析。

Attention相关问题笔试解析。 题目描述一&#xff1a;【选择】题目描述二&#xff1a;【简答】题目描述三&#xff1a;【代码】Scaled Dot-Product Attention&#xff1a;下面是用PyTorch实现的一个Attention机制的代码。这个实现包括一个简单的Scaled Dot-Product Attention机…

XX数字中台技术栈及能力

XX数字中台技术栈及能力 1 概述 XX数字中台面向数据开发者、数据管理者和数据应用者&#xff0c;提供数据汇聚、融合、治理、开发、挖掘、共享、可视化、智能化等能力&#xff0c;实现数据端到端的全生命周期管理&#xff0c;以共筑数字基础底座&#xff0c;共享数据服务能力…

Java核心: 脚本引擎和动态编译

静态语言和动态语言的在相互吸收对方的优秀特性&#xff0c;取人之长补己之短。脚本引擎和动态编译就是其中一个关键特性&#xff0c;扩展了Java的能力边界。这一篇我们主要讲两个东西: ScriptEngine&#xff0c;执行脚本语言代码&#xff0c;如JavaScript、Groovy JavaCompile…

插入排序(概述)

描述 插入排序为将一个数插入到以排序好的数组中 目录 描述 原理 特性 代码 原理 我们以升序为例 先将新数插入到数组的最后一位&#xff0c;记录下新数的值 从新数的位置开始往前遍历&#xff0c;如果前一位大于新数的值 则将当前位置修改为前一位的值 如果前一位小…

爬虫案例:有道翻译python逆向

pip install pip install requestspip install base64pip install pycrytodome tools 浏览器的开发者工具&#xff0c;重点使用断点&#xff0c;和调用堆栈 工具网站&#xff1a;https://curlconverter.com/ 简便请求发送信息 flow 根据网站信息&#xff0c;preview,respon…