业务项目中Echarts图表组件的封装实践方案

背景:如果我们的项目是一个可视化类/营销看板类/大屏展示类业务项目,不可避免的会使用到各种图表展示。那在一个项目中如何封装一个图表组件既能够快速复用、UI统一,又可以灵活扩充Echarts的各种复杂配置项配置就变得极为重要。

封装目标

  • 符合当前系统的业务UI(轴线、分隔线、配色、面积色、legend 等等)及场景
  • 可基于基础配置项便捷扩充其他特殊配置项
  • 可支持Echarts原生配置项,不引入过多额外的配置项!!!

封装误区

  • 基于Echarts配置项封装了基础配置项组件,但是组件无法扩充额外的配置项,使用不灵活(即总是需要频繁修改封装组件)
  • 在Echarts的的配置项上又封装了一层,改变了很多的配置项内容,使用成本较高(往往需要查看组件源码才知道要传入什么配置项属性)

封装思路

在这里插入图片描述

Vue项目实践

线图封装

<template><div v-if="notEmpty" :id="id" class="echarts-line"></div><div v-else class="echarts-empty">暂无数据</div>
</template><script>
import echarts from 'echarts';
import deepmerge from 'deepmerge';// 系统自定义区域
const colors = []; // 系统自定义的主题配色export default {name: 'EchartsLine',props: {echartsData: {type: Object,required: true,},},data() {return {lineChart: null,};},computed: {id() {return `echarts_line_${this.echartsData.id}`;},notEmpty() {return this.echartsData && this.echartsData.category.length > 0 && this.echartsData.series.length > 0;},},watch: {echartsData(value) {if (this.lineChart) {this.lineChart.setOption(this.getMergeOptions(value));this.lineChart.resize();}},},mounted() {this.init();},beforeDestroy() {window.removeEventListener('resize', this._listenerResize);},methods: {// [private] 处理轴的类型配置项,支持x轴为类目轴 | y轴为类目轴 | 双数据轴_dealAxisType(type, category) {const categoryAxis = {type: 'category',boundaryGap: true,data: category,};const valueAxis = {type: 'value',};switch (type) {case 'xCategory':return {xAxis: categoryAxis,yAxis: valueAxis,};case 'yCategory':return {yAxis: categoryAxis,xAxis: valueAxis,};case 'doubleValue':return {xAxis: {max: 'dataMax',boundaryGap: true,splitLine: {show: false,},},yAxis: {},};default:return {xAxis: categoryAxis,yAxis: valueAxis,};}},// [private] 获取线图默认配置项,系统整体统一UI_getDefaultOptions(type, category) {return {title: {subtext: '',left: 'center',textStyle: {color: '#98a6ad',fontSize: 16,fontWeight: 'normal',},},legend: {type: 'scroll',bottom: '0',},grid: {top: '30px',bottom: '50px',},color: colors,tooltip: {trigger: 'axis',axisPointer: {type: 'cross',},},...this._dealAxisType(type, category),};},// [private] 监听resize时间_listenerResize() {if (this.lineChart) {this.lineChart.resize();}},/*** [public] getMergeOptions 获取合并后的图表配置项,自定义配置项与默认配置项融合,若自定义配置项与默认配置项冲突则自定义配置项生效* 配置项合并规则:https://www.npmjs.com/package/deepmerge* @param type {String} * @param category {Array}* @param series {Array}* @param echartsConfig {Object}*/getMergeOptions({type = 'xCategory',category,series,echartsConfig = {},}) {// 01. 用户传进来的配置项和默认配置项进行合并const mergeOptions = deepmerge(this._getDefaultOptions(type, category),echartsConfig,);// 02. Series配置项合并【此处为示例】const mergeSeries = [];if (series && series.length > 0) {series.forEach((item) => {mergeSeries.push(deepmerge(item, {type: 'line',}),);});}// 03. 返回合并后的整体配置项 return {...mergeOptions,series: mergeSeries,};},// [public] 交互点,获取图表实例,用于触发图表APIgetEchartsInstance() {if (this.lineChart) {return this.lineChart;}return null;},// [public] 初始化图表init() {this.$nextTick(() => {this.lineChart = echarts.init(document.getElementById(this.id));this.lineChart.setOption(this.getMergeOptions(this.echartsData),);window.addEventListener('resize', this._listenerResize);});},},};
</script><style lang="less" rel="stylesheet/less" scoped>
.echarts-line{height: 350px;
}.echarts-empty{height: 200px;line-height: 200px;text-align: center;
}
</style>

业务调用

<v-line-chart class="echarts-item" :echarts-data="chartData"></v-line-chart>
 this.chartData = {id: 'lineChart',category:['test1','test2','test3','test4'],series: [{name: '测试图表',data:[10,20,30,40],}],echartsConfig: { // 所有Echarts原生配置项放在该属性下legend: {show: false,},},
};

参考

  • Echarts官网:https://echarts.apache.org/zh/index.html
  • deepMerge gitHub:https://github.com/TehShrike/deepmerge

业务方案简单封装,不作为公共UI库使用,欢迎讨论其他实现方案

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

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

相关文章

算法第十二天-矩形区域不超过K的最大数值和

矩形区域不超过K的最大数值和 题目要求 解题思路 来自[宫水三叶] 从题面来看显然是一道[二维前缀和]的题目。本题预处理前缀和的复杂度为O(m* n) 搜索所有子矩阵需要枚举[矩形左上角]和[矩形右下角]&#xff0c;复杂度是 O ( m 2 ∗ n 2 ) O(m^2 * n^2) O(m2∗n2)&#xff0c…

【数据库原理】(5)关系数据库的关系数据结构

关系及相关概念 在关系模型中,无论是实体还是实体之间的联系均由关系(二维表)来表示。 1.域&#xff08;Domain&#xff09; 定义&#xff1a;域是一组具有相同数据类型的值的集合。例子&#xff1a;实数集合、整数集合、英文字母集合等。 2.笛卡儿积&#xff08;Cartesian…

YOLOv5改进 | 卷积篇 | SAConv轻量化的可切换空洞卷积(附修改后的C3+Bottleneck)

一、本文介绍 本文给大家带来的改进机制是可切换的空洞卷积(Switchable Atrous Convolution, SAC)是一种创新的卷积网络机制,专为增强物体检测和分割任务中的特征提取而设计。SAC的核心思想是在相同的输入特征上应用不同的空洞率进行卷积,并通过特别设计的开关函数来融合这…

java基础之Java8新特性-Stream(流)

简介 流&#xff08;Stream&#xff09;是 Java 8 引入的一种处理集合数据的抽象概念&#xff0c;它提供了一种更简洁、更灵活的方式来操作和处理集合数据。流可以看作是一系列元素的管道&#xff0c;可以对这些元素进行筛选、转换、排序、归约等操作&#xff0c;实现各种数据…

【人工智能】深入了解人工智能的核心算法与应用实践

人工智能 学习AI要看的第一本书人工智能应当以人为本人工智能&#xff08;第3版&#xff09;通晓六点&#xff0c;明白人工智能是怎么回事基本概念和历史基础知识基于知识的系统高级专题现在和未来安全和编程 人工智能已经是基础学科 学习AI要看的第一本书 人工智能知识对于当…

Unix操作系统的前世今生

Unix是一种多用户、多任务操作系统&#xff0c;最初由AT&T贝尔实验室的肯汤普逊&#xff08;Ken Thompson&#xff09;和丹尼斯里奇&#xff08;Dennis Ritchie&#xff09;等人开发于上世纪70年代初。它被设计成一种通用的操作系统&#xff0c;支持跨多种硬件平台&#xf…

C++入门(详细解读,建议收藏)

&#x1f6a9;C是什么?&#x1f6a9;⛲&#x1f31f;⚡&#x1f966;&#x1f4ac; C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危…

ssm基于Java Web的怀旧唱片售卖系统论文

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装怀旧唱片售卖系统软件来发挥其高效地信息处理的作用&#x…

使用FinalShell连接Linux系统

1.为什么要使用FinalShell连接Linux系统&#xff1f; 如果直接使用VMware上的Linux系统会有很多不方便&#xff1a; 内容的复制粘贴跨越VMware不方便文件的上传、下载跨越VMware不方便 也就是和Linux系统的各类交互&#xff0c;跨越VMware不方便 2.FinalShell下载 FinalSh…

RH850P1X芯片学习笔记-A/D Converter (ADCF)

文章目录 Features of RH850/P1x-C ADCFNumber of UnitsRegister Base AddressClock SupplyInterrupts and DMAHardware ResetExternal Input/Output SignalsVirtual Channel OverviewFunctional OverviewBlock DiagramPhysical Channels, Virtual Channels and Scan Groups Re…

年终总结——平凡又不平凡的2023

前言 总结不知道该如何写起&#xff0c;也不知该如何建立这一篇文章的大致框架&#xff0c;只知道我的2023大概也就分成两大块罢了。说起2023一整年&#xff0c;只能用平凡而又不平凡来形容&#xff0c;平凡在我依旧没有什么太突出的技术点&#xff0c;专业水平也一直处于龟速…

RFID传感器|识读器CNS-RFID-01/1S在AGV小车|搬运机器人领域的安装与配置方法

AGV 在运行时候需要根据预设地标点来执行指令&#xff0c;在需要 AGV 在路径线上位置执行某个指令时候&#xff0c;则需要在这个点设置 命令地标点&#xff0c;AGV 通过读取不同地标点编号信息&#xff0c;来执行规定的指令。读取地标点设备为寻址传感器&#xff0c;目前&#…

【C语言:可变参数列表】

文章目录 1.什么是可变参数列表2.可变参数列表的分析与使用2.1使用2.2分析原理2.3分析原码 1.什么是可变参数列表 对于一般的函数而言&#xff0c;参数列表都是固定的&#xff0c;而且各个参数之间用逗号进行分开。这种函数在调用的时候&#xff0c;必须严格按照参数列表中参数…

【Vue3+React18+TS4】1-1 : 课程介绍与学习指南

本书目录&#xff1a;点击进入 一、为什么做这样一门课程? 二、本门课的亮点有哪些? 2.1、轻松驾驭 2.2、体系系统 2.3、高效快捷 2.4、融合贯通 三、课程内容包括哪些? 四、项目实战 《在线考勤系统》 五、课适合哪些同学? 一、为什么做这样一门课程? 近十年内前端…

git使用(完整流程)

1. 新建仓库 1.右击 git bash 后 输入 git init (仓库为:当前目录) git init name (仓库为:name文件夹) git clone https://github.com/Winnie996/calculate.git //https2.工作区域 工作目录 3. 添加 提交 git add . //工作区添加至暂存区 git commit -m "注释内容&q…

Android14之Selinux解决neverallow报错(一百七十六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

Kafka消息阻塞:拯救面试的八大终极解决方案!

大家好&#xff0c;我是小米&#xff0c;一个对技术充满热情的90后程序员。最近在准备社招面试的过程中&#xff0c;遇到了一个超级有挑战性的问题&#xff1a;“Kafka消息阻塞怎么解决&#xff1f;”今天&#xff0c;我就来和大家一起深入剖析这个问题&#xff0c;分享我在解决…

kubernetes(k8s)集群常用指令

基础控制指令 # 查看对应资源: 状态 $ kubectl get <SOURCE_NAME> -n <NAMESPACE> -o wide 查看默认命名空间的pod [rootk8s-master ~]# kubectl get pod NAME READY STATUS RESTARTS AGE nginx 1/1 Running 0 3h53m查看所有pod [roo…

Vue3-36-路由-路由的元数据信息 meta

什么是 meta 简单的理解&#xff0c;meta 就是路由对象 的一个属性对象&#xff0c; 可以 通过这个 属性给 路由对象添加 一些必要的属性值&#xff0c; 在使用路由对象时可以获取到这个属性型对象&#xff0c;从而进行一些其他的逻辑判断。 meta 这个非常的简单&#xff0c;就…

深入了解ReadDirectoryChangesW并应用其监控文件目录

简介 监视指定目录的更改&#xff0c;并将有关更改的信息打印到控制台&#xff0c;该功能的实现不仅可以在内核层&#xff0c;在应用层同样可以。程序中使用 ReadDirectoryChangesW 函数来监视目录中的更改&#xff0c;并使用 FILE_NOTIFY_INFORMATION 结构来获取有关更改的信息…