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

echarts图表自定义配置(二)——代码封装

在这里插入图片描述

下图是初版,火山图的代码。可以看出,里面的变量,逻辑,函数存在冗余,基本上都是改了参数,同样的get和set,去刷新图表;对于往后继续开发十几二十个图表,会很麻烦。因此需要将这一些基本配置:字体,颜色,样式,大小,下拉色卡 / Vuex的相关参数,方法进行代码封装。

在这里插入图片描述

  1. 封装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;
},
  1. 封装色卡组件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>
  1. 全局更新
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图表自定义配置(二)——代码封装

下图是初版&#xff0c;火山图的代码。可以看出&#xff0c;里面的变量&#xff0c;逻辑&#xff0c;函数存在冗余&#xff0c;基本上都是改了参数&#xff0c;同样的get和set&#xff0c;去刷新图表&#xff1b;对于往后继续开发十几二十个图表&#xff0c;会很麻烦。因此需要…...

02、10个富士胶片模拟的设置

二色彩 1、色彩的加减控制全局的饱和度增减&#xff1b; 2、色彩效果只提升暖色系饱和度&#xff1b; 3、FX蓝色大幅度提升蓝色系饱和度&#xff1b; 4、三个参数都不改变颜色的色相。 2.1 色彩 色彩调整的是拍摄画面整体的色彩饱和程度 2.2色彩效果 调整的是画面中暖色…...

鸿蒙系统-前端0帧起手

鸿蒙系统-前端0帧起手 先search 一番 找到对应的入门文档1. 运行项目遇到问题 如下 &#xff08;手动设计npm 的 registry 运行 npm config set registry https://registry.npmjs.org/&#xff09;2.运行后不支持一些模拟器 配置一下&#xff08;如下图&#xff0c;运行成功&am…...

211-基于FMC的1路1.5G ADC 1路 2.5G DAC子卡

一、板卡概述 FMC-1AD-1DA-1SYNC是我司自主研发的一款1路1G AD采集、1路2.5G DA回放的FMC、1路AD同步信号子卡。板卡采用标准FMC子卡架构&#xff0c;可方便地与其他FMC板卡实现高速互联&#xff0c;可广泛用于高频模拟信号采集等领域。 二、功能介绍 2.1 原理框图 2.2 硬件…...

获取微信用户openid

附上开发文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 开发之前,准备事项 一个已认证过的服务号|基本信息配置js域名和网站授权域名配置最后确认当前账号网页授权功能是否开通,没有开通的无法获取到用户授权开发人…...

MultiRECloudSim使用

MultiRECloudSim使用 简介 MultiRECloudSim是一个用于云计算环境下的模拟器相关工具,它主要用于模拟和评估云计算中的资源分配、任务调度等多种场景。它可能是基于CloudSim这个基础的云计算模拟器进行扩展而来,CloudSim提供了基本的云计算模拟功能,如数据中心、虚拟机、任务…...

智能设备安全-固件逆向分析

固件逆向分析实验报告-20241022 使用固件常用逆向分析工具&#xff0c;对提供的固件进行文件系统提取&#xff0c;并记录逆向分析实验过程&#xff0c;提交实验报告&#xff08;报告要求图文并茂&#xff0c;对涉及到的关键步骤附截图说明&#xff09;。具体任务如下&#xff1…...

【小白包会的】使用supervisor 管理docker内多进程

使用supervisor 管理docker内多进程 一般情况下&#xff0c;一个docker是仅仅运行一个服务的 但是有的情况中&#xff0c;希望一个docker中运行多个进程&#xff0c;运行多个服务&#xff0c;也就是一个docker容器执行多个服务。 调研了一下&#xff0c;发现可以通过**super…...

使用navicat新旧版本,连接PostgreSQL高版本报错问题图文解决办法

使用navicat新旧版本&#xff0c;连接PostgreSQL高版本报错问题图文解决办法 一、问题现象&#xff1a;二、出现原因三、解决方法&#xff1a;1、升级Navicat版本&#xff1a;2、使用低版本的postgreSQL&#xff1a;3、修改Navicat的dll二进制文件&#xff1a;navicat版本15nav…...

IDEA 未启用lombok插件的Bug

项目中maven已引用了lombok依赖&#xff0c;之前运行没有问题的&#xff0c;但有时启动会提示&#xff1a; java: You arent using a compiler supported by lombok, so lombok will not work and has been disabled. Your processor is: com.sun.proxy.$Proxy8 Lombok support…...

认识GO--gRPC的metadata

参考&#xff1a; 写给go开发者的gRPC教程-metadata-CSDN博客https://blog.csdn.net/kevin_tech/article/details/129395177?ops_request_misc%257B%2522request%255Fid%2522%253A%25221f2f2e26f48c755c33344ccb171a49fc%2522%252C%2522scm%2522%253A%252220140713.130102334…...

2024年安徽省职业院校技能大赛信息安全管理与评估

一、赛项名称 赛项名称&#xff1a;信息安全管理与评估 英文名称&#xff1a;Information Security Management and Evaluation 赛项组别&#xff1a;高职组 赛项归属&#xff1a;电子信息大类 二、竞赛目标 通过赛项检验参赛选手熟悉信息安全行业标准规范和信息 安全测试员新职…...

Perl 引用

Perl 引用 Perl&#xff0c;作为一种灵活而强大的编程语言&#xff0c;广泛用于系统管理、网络编程、GUI开发等领域。在Perl编程中&#xff0c;引用&#xff08;References&#xff09;是一个核心概念&#xff0c;它允许变量引用其他数据&#xff0c;从而创建复杂的数据结构&a…...

RT-Thread启动过程 :从汇编开始的启动流程

这个系列参考了《嵌入式实时操作系统RT-Thread设计与实现》&#xff0c;会详细介绍RT-Thread的启动流程&#xff0c;即是如何从零开始在开发板上运行起一个RTOS内核的。本文将会以 ch32v307VCT6 开发板为例展开进行详细介绍。主要包括&#xff1a;startup.S、初始化与系统相关的…...

Scala—“==“和“equals“用法(附与Java对比)

Scala 字符串比较—""和"equals"用法 Scala 的 在 Scala 中&#xff0c; 是一个方法调用&#xff0c;实际上等价于调用 equals 方法。不仅适用于字符串&#xff0c;还可以用于任何类型&#xff0c;并且自动处理 null。 Demo&#xff1a; Java 的 在 J…...

$route和$router的区别

在 Vue.js 中&#xff0c;$route 和 $router 都是 Vue Router 提供的对象&#xff0c;但它们有不同的用途和功能。 1. $router $router 是 Vue Router 实例的引用&#xff0c;它允许你通过 JavaScript 进行路由的控制和导航。你可以通过 $router 来执行路由的操作&#xff0c…...

[工具升级问题] 钉钉(linux版)升级带来的小麻烦

本文由Markdown语法编辑器编辑完成。 1. 背景: 今日钉钉又发布了新的升级版本。由于我工作时使用的是Ubuntu 20.04版本&#xff0c;收到的升级推送信息是&#xff0c;可以升级到最新的7.6.25-Release版本。根据钉钉官方给出的历次更新版说明&#xff0c;这个新的版本&#xf…...

Leetcode经典题13--接雨水

题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 输入输出示例 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1…...

yarn修改缓存位置

查看缓存位置 以下三个命令分别为&#xff1a;bin是yarn存储命令的二进制文件&#xff0c;global存储全局node_modules &#xff0c;cache存储用下下载缓存&#xff0c;查看本机目前的目录&#xff1a; 查看bin目录命令&#xff1a;yarn global bin 查看global目录命令&…...

OpenHarmony-3.HDF input子系统(5)

HDF input 子系统OpenHarmony-4.0-Release 1.Input 概述 输入设备是用户与计算机系统进行人机交互的主要装置之一&#xff0c;是用户与计算机或者其他设备通信的桥梁。常见的输入设备有键盘、鼠标、游戏杆、触摸屏等。本文档将介绍基于 HDF_Input 模型的触摸屏器件 IC 为 GT91…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...