echarts图表自定义配置(二)——代码封装
下图是初版,火山图的代码。可以看出,里面的变量,逻辑,函数存在冗余,基本上都是改了参数,同样的get和set,去刷新图表;对于往后继续开发十几二十个图表,会很麻烦。因此需要将这一些基本配置:字体,颜色,样式,大小,下拉色卡 / Vuex的相关参数,方法进行代码封装。
- 封装
fontSetting
组件,将图表标题,x轴标题,y轴标题,x轴标签,y轴标签的自定义配置,进行统一管理
<!--父组件使用fontSetting-->
<!--传入参数:chart-type:用于判断图表类型,如果是饼图是没有x,y轴的相关参数的settings:echarts的一些配置信息,具体来说就是一个对象里面,包含了之前的所有”fontSize, fontFamily ... ...“
-->
<font-settings :chart-type="'GeenLen'" :settings="geenLenOptions.settings" /><!--子组件,fontSetting.vue-->
<div class="itemList"><div class="item" v-for="(item, index) in fontSettings" :key="index"><div class="font-title">{{ item.label }}</div><div class="font-controls"><div class="control-item" v-if="item.textKey"><span>文本:</span><el-inputv-model="settings[item.textKey]"size="medium"@input="value => handleFontChange(item.textKey, value)"></el-input></div><div class="control-item"><span>字体:</span><el-selectv-model="settings[item.familyKey]"size="large"@change="value => handleFontChange(item.familyKey, value)"><el-optionv-for="font in fontFamilies":key="font.value":label="font.label":value="font.value"></el-option></el-select></div><div class="control-item"><span>大小:</span><el-input-numberv-model="settings[item.sizeKey]":min="8":max="72"size="medium"@change="value => handleFontChange(item.sizeKey, value)"></el-input-number></div><div class="control-item"><span>颜色:</span><el-color-pickerv-model="settings[item.colorKey]"size="medium"@change="value => handleFontChange(item.colorKey, value)"></el-color-picker></div><div class="control-item"><span>样式:</span><el-switchv-model="settings[item.styleKey]"active-value="italic"inactive-value="normal"active-text="斜体"@change="value => handleFontChange(item.styleKey, value)"></el-switch></div></div></div>
</div>
//子组件的相关参数和方法
//接收父组件的传值
props: {settings: {type: Object,required: true},chartType: {type: String,required: true}
},
//自定义参数配置
data() {return {fontSettings: [{ label: '图表标题',textKey: 'title',familyKey: 'titleFontFamily',sizeKey: 'titleFontSize',colorKey: 'titleFontColor',styleKey: 'titleFontStyle'},{ label: 'X轴标题',textKey: 'xAxisTitle',familyKey: 'xAxisTitleFontFamily',sizeKey: 'xAxisTitleFontSize',colorKey: 'xAxisTitleFontColor',styleKey: 'xAxisTitleFontStyle'},{ label: 'Y轴标题',textKey: 'yAxisTitle',familyKey: 'yAxisTitleFontFamily',sizeKey: 'yAxisTitleFontSize',colorKey: 'yAxisTitleFontColor',styleKey: 'yAxisTitleFontStyle'},{ label: 'X轴标签字体',familyKey: 'xAxisLabelFontFamily',sizeKey: 'xAxisLabelFontSize',colorKey: 'xAxisLabelFontColor',styleKey: 'xAxisLabelFontStyle'},{ label: 'Y轴标签字体',familyKey: 'yAxisLabelFontFamily',sizeKey: 'yAxisLabelFontSize',colorKey: 'yAxisLabelFontColor',styleKey: 'yAxisLabelFontStyle'}],fontFamilies: [{ label: 'Arial', value: 'Arial' },{ label: 'Times New Roman', value: 'Times New Roman' },{ label: '微软雅黑', value: 'Microsoft YaHei' },{ label: '宋体', value: 'SimSun' },{ label: '黑体', value: 'SimHei' }]};
},
//判断哪些图表不需要x/y轴配置
mounted() {if (this.chartType === 'GeenLen') {this.fontSettings = this.fontSettings.filter(item => item.label == '图表标题');}
},methods: {...mapActions('echartEncapsulation', ['updateStyle', 'setOptions', 'setSetting']),handleFontChange(key, value) {//change事件触发时,更新父组件的settings对象,并且将修改后的值更新到Vuex中this.$emit('update:settings', {...this.settings,[key]: value});this.updateStyle({target: 'readsRegion',key,value});}
}
//vuex
updateStyle({ commit }, { key, value }) {commit('SET_STYLE', { key, value });
},
SET_STYLE(state, { key, value }) {state.insertSizeOptions.settings[key] = value;
},
封装色卡组件
colorList
,实现在多个图表中,切换整体色系风格。色卡选择器的代码和上一篇博文是一致的,区别就是:传入chart-type
参数,用于触发不同的事件回调函数。
this.$emit(``change${this.chartType},
selectedColors.colors);
<!--父组件使用colorList-->
<ColorList :chart-type="'GeenLen'" @changeGeenLen="handleColorChange"></ColorList>
<!--兄弟组件中,对于$emit触发的函数,进行处理-->
this.$bus.$on('updateColorGoBar', (colors) => {this.colorList = colors
});
beforeDestroy() {
// 组件销毁前移除事件监听this.$bus.$off('updateColorGoBar');
},
<!--子组件colorList-->
<template><div class="color-template-select"><el-selectv-model="selectedValue":placeholder="placeholder"@change="handleTemplateChange":style="{ width: width }"ref="selectRef"><el-optionv-for="(template, index) in colorTemplates":key="index":label="template.name":value="template.name"><div style="display: flex; gap: 5px"><divv-for="(color, colorIndex) in template.colors":key="colorIndex"class="color-box":style="{backgroundColor: color,width: '20px',height: '20px',}"></div></div></el-option></el-select></div>
</template><script>
export default {name: 'ColorTemplateSelect',props: {width: {type: String,default: '250px'},placeholder: {type: String,default: ''},chartType: {type: String,default: ''}},data() {return {selectedValue: '',selectSVG: '',colorTemplates: [],},],};},mounted() {const defaultColors = this.colorTemplates[0].colors;// this.$emit('changeGoBar', defaultColors);this.$emit(`change${this.chartType}`, defaultColors);this.getSvgString(defaultColors);},methods: {handleTemplateChange() {const selectedColors = this.colorTemplates.find((template) => template.name === this.selectedValue);if (selectedColors) {// console.log(this.chartType,"-----");this.$emit(`change${this.chartType}`, selectedColors.colors);// this.$emit('changeGoBar', selectedColors.colors);this.selectedValue = "";this.getSvgString(selectedColors.colors);}},}
};
</script>
- 全局更新
this.$store.dispatch("echartEncapsulation/setSetting", {target: "goBar",settings: initialSettings,
});
setSetting({ commit }, { target, settings }) {commit('SET_SETTINGS', { target, settings });
}
SET_SETTINGS(state, { target, settings }) {state[`${target}Options`].settings = settings;
}
相当于此前,一个图表的配置,相关函数,重复逻辑可能会有上千行,如果存在十几二十个图表,对于后期维护极差,在封装后,基本能够减少80%的代码量,并且减少后续开发投入的精力
相关文章:
echarts图表自定义配置(二)——代码封装
下图是初版,火山图的代码。可以看出,里面的变量,逻辑,函数存在冗余,基本上都是改了参数,同样的get和set,去刷新图表;对于往后继续开发十几二十个图表,会很麻烦。因此需要…...
Serdes技术与Xilinx GT概览
目录 一、前言 二、Serdes技术 2.1 芯片间信号传输 2.2 Serdes技术 三、 Xilinx GT 3.1 7系列器件GT 3.2 Ultrascale GT 3.3 Ultrascale GT 四、参考资料 一、前言 对于芯片间高速信号传输技术,不得不提serdes以及在Xilinx在此基础上的高速收发器GT系列&…...
WEB开发: Node.js路由之由浅入深(三)自动配置路由 - 全栈工程师入门
前面我们一起学习了Node.js路由的两个进阶, (1)WEB开发: Node.js路由之由浅入深(一) - 全栈工程师入门 (2)WEB开发: Node.js路由之由浅入深(二)…...
6-9 捕获 0 异常(1)
中断号的 处理是这样的。 1、 cpu 根据中断号 去中断向量表 去找 第几个 表。、 2、 而 中断向量表 的内容是 GDT 的选择子。 3、 由于使用是的 平坦模型,所以只需要 将具体的函数给到 中断向量表的 offset 字段就可以了。 接下来 就是 在 代码中定义 中断门的属…...
社区团购创新模式与新兴技术融合的深度探索:基于开源、AI 智能名片、2+1 链动模式与 S2B2C 商城小程序
摘要:本文聚焦于社区团购这一新兴零售业态,深入剖析其“线上预售,线下自提,以销定采,落地集配”的 16 字箴言所蕴含的商业逻辑。详细探讨在物流与信息流层面社区团购的独特优势,并在此基础上研究开源理念、…...
day45 198.打家劫舍 213.打家劫舍II 337.打家劫舍III
198.打家劫舍 相邻的房子不可以打劫,所以递推式需要考虑; 初始化也需要考虑,可以从两个方向入手 方向1:从后往前看,dp[i] dp[i-1] class Solution { public:int rob(vector<int>& nums) {if (nums.size(…...
SQL server学习02-使用T-SQL创建数据库
目录 一, 使用T-SQL创建数据库 1,数据库的存储结构 2,创建数据库的语法结构 1)使用T-SQL创建学生成绩管理数据库 二,使用T-SQL修改数据库 1,修改数据库的语法结构 1)修改学生成绩管理数…...
绘图方式集合
1. 流程图 1.1 PlantUML 代码绘制流程图 1.1.1 简介 1.1.2 网站 你可以使用以下网站来将 PlantUML 代码转换成可视化的流程图: PlantUML 官方网站 网站地址:https://plantuml.com/plantuml此网站提供了一个在线工具,可以直接输入 PlantUM…...
sqoop导入hdfs,hive
sqoop将mysql中的表导入到hdfs中 sqoop import \ > --connect jdbc:mysql://192.168.52.150/test \ > --username root \ > --password 123456 \ > --table emp \ > --delete-target-dir \ > --target-dir /sqoop_works/emp_1将数据导入hive中,首…...
C语言动态内存管理【进阶--5--】
文章目录 [toc] 动态内存管理一、作用即意义二、动态内存函数的介绍Ⅰ、malloc()函数、free()函数Ⅱ、calloc()函数Ⅲ、realloc()函数 三、常见的动态内存错误Ⅰ、对NULL指针的解引用操作Ⅱ、对动态开辟空间的越界访问Ⅲ、对非动态开辟的内存使用free释放Ⅳ、使用free释放动态开…...
Hadoop其四,片与块,MapReduce原理,Shuffle过程,Combiner
目录 一、关于片和块 二、MapReduce的原理 MapTask执行阶段 ReduceTask的执行流程: 三、Shuffle 过程 map端: reduce端: 环形缓冲区: 四、Combiner 【可有可无】 五、需要记忆的内容 一、关于片和块 假如我现在500M这样…...
引领未来的变革:15种前沿RAG技术及其应用探索
在现代人工智能领域,检索增强生成(RAG)技术逐渐成为推动各种应用的重要力量。这些技术通过结合信息检索与文本生成,能够更有效地处理和利用信息。本文将详细介绍15种前沿RAG技术及其具体应用实例,以帮助您更好地理解这…...
gradle在IDEA 中无法使用的启动守护线程的问题
最近打开一个比较早的项目,Gradle 配置没有问题,IDEA 打开Java项目却不能初始化守护线程,UI 上只能看到失败,看不到具体原因。 首先尝试了升级最新的gradle 版本8.11, 实际上这个版本在本地命令行都不能正常工作,没有…...
C++小白实习日记——Pollnet,Efvi,UDP,数据类型转换(上)
上周主要是熟悉了一下公司内部一些自定义结构体对应的数据类型,要求:读取文件,将文件中数据转化为定义的结构体中的数据类型,按照时间进行排序,用UDP发送数据;在另一台服务器上接收数据,按照定义…...
git安装教程(Git-2.38.1-64-bit)
目录 一、git下载 二、git安装 1.更改安装路径 2.安装组件 3.选择开始菜单文件夹 4.选择Git默认编辑器 5.决定初始化新项目(仓库)的主干名字 6.修改Git的环境变量 7.选择SSH执行文件 9.选择HTTPS后端传输 10.配置行尾符号转换 11.配置终端模…...
C# OpenCvSharp DNN 实现百度网盘AI大赛-表格检测第2名方案第三部分-表格方向识别
目录 说明 效果 模型 项目 编辑 代码 参考 下载 其他 说明 百度网盘AI大赛-表格检测的第2名方案。 该算法包含表格边界框检测、表格分割和表格方向识别三个部分,首先,ppyoloe-plus-x 对边界框进行预测,并对置信度较高的表格边界…...
selenium 验证码滑块对齐没有验证通过
描述: 最近使用seleniuim采集有滑块验证码的数据,遇到了移动滑块对齐后,还是无法通过验证,经过模拟真人多次移动、控制移动时间(避免过快)一番尝试后、最终通过模拟抖动得以解决 解决办法: 把yoffset的值改为-6~6的…...
【Neo4J】neo4j docker容器下的备份与恢复
文章目录 一. 官网说明1. 操作说明2. 注意事项 二. docker 容器化操作1. 导出(备份)停止容器执行备份 2. 导入(恢复)停止容器(如果未停止)执行导入 3. 启动容器 一. 官网说明 https://neo4j.com/docs/operations-manual/current/…...
Java实现雪花算法获取id
Java实现雪花算法获取id 在 Java 中实现雪花算法(Snowflake)时,通常会设计一个工具类来生成全局唯一的 ID。这个工具类可以封装雪花算法的逻辑,并提供简单的接口来生成 ID。 以下是一个完整的 Java 工具类实现雪花算法的例子&am…...
Leetcode1338:数组大小减半
题目描述: 给你一个整数数组 arr。你可以从中选出一个整数集合,并删除这些整数在数组中的每次出现。 返回 至少 能删除数组中的一半整数的整数集合的最小大小。 代码思路: 这个代码的目的是解决一个特定的问题:给定一个整数数…...
【系统思辨】分散注意
注意力在我们的日常生活和工作中扮演着至关重要的角色。注意力可以提高效率和准确性、减少错误和失误,提升学习效率,促进创造力。与此同时,各种各样的生活事件在分散我们的注意力,并且还有很多分散我们注意的手段,比如…...
微信小程序中 Echarts 的巧妙运用
一、引入 Echarts 的准备工作 在微信小程序中引入 Echarts 需要进行一系列的准备工作。首先,我们可以从 echarts 官网或 GitHub 上下载 echarts-for-weixin 项目。找到其中的 ec-canvas 文件夹,这个文件夹将是我们引入到微信小程序项目中的关键部分。 …...
opencv——图片矫正
图像矫正 图像矫正的原理是透视变换,下面来介绍一下透视变换的概念。 听名字有点熟,我们在图像旋转里接触过仿射变换,知道仿射变换是把一个二维坐标系转换到另一个二维坐标系的过程,转换过程坐标点的相对位置和属性不发生变换&a…...
Gate学习(7)引入体素源
一、从GitHub下载体素源模型源码 下载地址:BenAuer2021/Phantoms-for-Nuclear-Medicine-Imaging-Simulation:用于核医学成像应用的模型(闪烁显像、SPECT 和 PET) --- BenAuer2021/Phantoms-For-Nuclear-Medicine-Imaging-Simulat…...
腾讯微信Android面试题及参考答案(多张原理图)
Android 应用的启动流程如下: 当用户点击应用图标时,首先会通过 Launcher(桌面启动器)来响应这个操作。Launcher 本身也是一个 Android 应用,它运行在系统中,负责管理和显示桌面上的图标等信息。 系统会检查应用是否已经有进程存在。如果没有,就会通过 Zygote 进程来孵化…...
【Android】View的工作流程
View的工作流程 开始了解一下View的工作流程,就是measure、layout和draw。measure用来测量View的宽高,layout用来确定View的位置,draw则用来绘制View。这一讲我们来看看measure流程,measure流程分为View的measure流程和ViewGroup…...
Linux基础指令
使用 tab 键补全 我们敲的所有的 Linux 命令 , 都可以使用 tab 键来尝试补全 , 加快效率 . 使用 ctrl c 重新输入 如果命令或者目录敲错了 , 可以 ctrl c 取消当前的命令 . ls :列出当前目录中的文件和子目录 语法 : ls [ 选项 ] [ 目录或文…...
Gemini 2.0 Flash重磅发布:多模态AI大模型,赋能实时交互与智能助手新体验
点击访问 chatTools 免费体验GPT最新模型,包括o1推理模型、GPT4o、Claude、Gemini等模型! 在AI领域竞争日益激烈的今天,谷歌再次亮剑,推出了新一代至强AI大模型——Gemini 2.0 Flash。这款模型不仅具备强大的多模态输入输出能力&a…...
项目十二 杜甫作品问卷
【项目目标】 理解网格系统的原理。理解媒体查询的工作原理。【項目内容】 使用网格系统进行响应式网页设计。运用媒体查询对不同类型的设备应用不同的样式。【项目步骤】 Bootstrap 框架资源既可以直接从 CDN 服务商服务器中引入,也可以加入本地素材文件夹中给出的资…...
7_Sass Introspection 函数 --[CSS预处理]
Sass 的 Introspection 函数允许开发者检查和操作样式表的内部结构,包括选择器、属性、值等。这些函数提供了对编译过程中 Sass 文件内容的深入访问能力,使得更复杂的逻辑处理成为可能。以下是一些常用的 Sass Introspection 函数及其用法示例࿱…...
Qt:Q_GLOBAL_STATIC实现单例(附带单例使用和内存管理)
转载 https://blog.csdn.net/m0_71489826/article/details/142288179 前言 本文主要写Q_GLOBAL_STATIC实现单例以及单例的释放,网上很多教程只有单例的创建,但是并没有告诉我们单例的内存管理,这就很头疼。 正文 使用 Qt 的 Q_GLOBAL_STA…...
HTML/CSS总结
HTML 1.1 标题标签h 为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即 标题标签语义: 作为标题使用,并且依据重要性递减 其基本语法格式如下: <h1> 标题文本…...
字符串性能对比
效率(1) : String.indexOf与String.contains效率测试_string contains效率-CSDN博客 结论是前者效率高,源码里面conatins是使用indexof 在jdk8中contains直接调用的indexOf(其他版本没有验证),所以要说效率来说肯定是indexOf高,但contains也就多了一层方法栈,so 什…...
【漫话机器学习系列】005.神经网络的结构(architecture on the neural network)
神经网络(Neural Network)是一种模拟人脑神经系统的计算模型,由大量相互连接的神经元(节点)组成,广泛应用于深度学习和机器学习领域。以下是神经网络的基本结构及关键组成部分。 1. 神经网络的基本组成 一…...
关卡选择与布局器
unity布局管理器 使用unity布局管理器轻松对关卡选择进行布局。 实现过程 准备普通按钮button设置字体和对应的sprite设置父gameobject(levelbase) 再创建UI.image(selectbackground)布局背景和大小gameobject(grid…...
数据分析实战—房价特征关系
1.实战内容 (1) 读取房价特征关系表(house_price.npz)绘制离地铁站的距离与单位面积的房价的散点图,并对其进行分析; import pandas as pd import numpy as np import warnings warnings.filterwarnings(&…...
@ResponseBody详解
ResponseBody 是 Spring Framework 中的一种注解,用于表示返回的内容应该直接写入 HTTP 响应体,而不是通过视图解析器来渲染一个视图(如 JSP 页)。当你在控制器的方法上使用 ResponseBody 时,Spring 会将方法的返回值直…...
Harmony Next开发通过bindSheet绑定半模态窗口
示例概述 Harmony Next开发通过bindSheet绑定半模态窗口 知识点 半模态窗口父子组件传值 组件 LoginComponent Component struct LoginComponent {// Prop 父子单项绑定值Prop message:string // Link 父子双向绑定值Link userName:stringLink password:stringLink isSh…...
Redis--高并发分布式结构
目录 一、引言 二、redis 1.什么是redis? 三、基础概念 1.什么是分布式? 2.应用服务和数据库服务分离 3.负载均衡 4.分库分表 5.微服务架构 四、总结 一、引言 本篇文章就简单介绍一下什么是redis,以及一些关于高并发和分布式结构的…...
Day38 动态规划part06
322. 零钱兑换 如果求组合数就是外层for循环遍历物品,内层for遍历背包。 如果求排列数就是外层for遍历背包,内层for循环遍历物品。 这句话结合本题 大家要好好理解。 视频讲解:动态规划之完全背包,装满背包最少的物品件数是多少?| LeetCode:322.零钱兑换_哔哩哔哩_bilib…...
1.1 类型(types)
源码 types.rs文件源码: use euclid::{Point2D, Vector2D};//引用外部泛型/// 绘图中所有事物所使用的笛卡尔坐标系。The cartesian coordinate system used by everything in a drawing. #[derive(Debug, Copy, Clone, PartialEq, Eq, Ord, PartialOrd)] pub enu…...
PyTorch如何通过 torch.unbind 和torch.stack动态调整张量的维度顺序
笔者一篇博客PyTorch 的 torch.unbind 函数详解与进阶应用:中英双语中有一个例子如下: # 创建一个 3x2x2 的三维张量 x torch.tensor([[[1, 2], [3, 4]],[[5, 6], [7, 8]],[[9, 10], [11, 12]]])# 第一步:沿第 0 维分解为 3 个 2x2 张量 un…...
在 Node.js 中安装和使用 TensorFlow.js 的完整指南
在 Node.js 中安装和使用 TensorFlow.js 的完整指南 简介 TensorFlow.js 是一个开源的机器学习库,它允许在 JavaScript 环境中进行机器学习模型的开发和训练。本文将介绍如何在 Node.js 环境中安装和配置 TensorFlow.js。 环境准备 在开始之前,请确保…...
ubuntu 下如何查看用户的最近登录的时间
在 Ubuntu 系统下,可以通过以下几种方式查看用户最近的登录时间: 方法 1: 使用 last 命令 last 命令会显示系统上用户的登录记录,包括时间和来源。 last 用户名 例如,要查看用户 test 的最近登录记录: last test …...
Linux下调试工具:gdb
Windows和Linux下的调试有区别吗? 调试思路上一定是一样的;调试的操作方式有差别(Linux命令行调试,Windows窗口) 1.准备工作: 默认情况下,gdb无法进行对现在发布的程序进行调试(debug / release)。在Linux下用gcc编译…...
metagpt 多智能体系统
metagpt 多智能体系统 代码1. 动作及角色定义2. 主函数 代码解释1. 导入模块:2. 环境设置:3. 定义行动(Action):4. 定义角色(Role):5. 学生和老师的行为:6. 主函数&#…...
Python中opencv的一些函数及应用
Sobel 算子函数 功能: Sobel 算子用于计算图像的梯度(变化率),常用于边缘检测。它通过对图像应用一个基于一阶导数的滤波器来强调图像中的边缘部分,特别是水平和垂直方向上的边缘。通过计算图像的梯度,可以…...
泷羽sec学习打卡-brupsuite8伪造IP和爬虫审计
声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都 与本人无关,切莫逾越法律红线,否则后果自负 关于brupsuite的那些事儿-Brup-FaskIP 伪造IP配置环境brupsuite导入配置1、扩展中先配置python环境2、安…...
麒麟信安推出支持信创PC的新一代云桌面方案,助力政务信创高效安全运维
12月11日,在第二届国家新一代自主安全计算系统产业集群融通生态大会上,麒麟信安发布了支持信创PC的新一代云桌面方案,该方案是基于国际TCI架构实现国产PC机云化纳管在国内的首次发布,并与银河麒麟桌面操作系统、长城国产PC整机实现…...
【我的开源】ESCurlGen 一款 ElasticSearch curl 命令生成器
由于经常编写复杂的 Elasticsearch 查询,并通过代码生成查询条件,我发现每次使用 curl 请求 Elasticsearch 时,手动复制配置信息并构建 curl 命令的过程非常繁琐,尤其是在管理多个环境的情况下更为不便。因此,我利用 A…...