关于echars 操作legend 解决方案

2024-02-01 17:20

本文主要是介绍关于echars 操作legend 解决方案,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

需求:
1、legend 图例需要是虚线
https://frontend.devrank.cn/traffic-information/7208578249369765947 (重点)
https://blog.csdn.net/weixin_48400717/article/details/128935213

2、可单选 和 多选

3、lengend 和 sever 数据name 保持一致

4、

legend:[{selectedMode:'single', // 单选itemWidth: 14,itemHeight: 4,top:20,icon:'rect',textStyle: {fontSize: 14,height: 12,color: '#fff',rich: {a: {verticalAlign: 'media',},},},}],

3、dom.vue 页面

<zmjEcharts ref="supHeiEcharts" title="支架压力" echartsId="supHeiEcharts" :isEchartAbsolute="true">
</zmjEcharts>

js 页面

import { echartsOptions } from '@/components'
import dragImg from '@/assets/image/line/line-9.png'
export const supHeiEcharts = (obj, haveFourCol) => {const worknce = 333console.log((obj[0]?obj[0][0]:null), haveFourCol, '--------')const markLine = {symbol: 'none',data: [{lineStyle: {type: 'dashed',color: '#FA7272',},label:{position: 'insideEndTop',fontSize: '10',formatter:`333: {c}`,color:'#FA7272',},yAxis: workingResistance || 'none',}],}const leg = {selectedMode:haveFourCol?'single':'',itemWidth: 14,itemHeight: 4,// top:0,icon:'rect',textStyle: {fontSize: 14,height: 12,color: '#fff',rich: {a: {verticalAlign: 'media',},},},}let defaultOption = JSON.parse(JSON.stringify(echartsDefaultOptions))const options2 = {xAxis:{...defaultOption.xAxis[0],data: obj.finalSupportPressure?.map(item => {return item.dateTime}),type: 'category',},color:['#FFDB26', '#579AFF', '#FF5962'],legend: [{...leg,right: '51%',data: [{name: '11',icon: 'roundRect',},],},{...leg,right: '47%',data: [{name: '22',icon: 'roundRect',},],},{right: '40.8%',...leg,itemWidth: 14, // 图例图形的宽度itemHeight: 1, // 图例图形的高度data: [{name: '33', // 图例文字内容icon: `image://${dragImg}`,},],},],series : [{data: obj.initialSupportPressure?.map(item => {return item.value}),type: 'line',name: '11',},{data: obj.finalSupportPressure?.map(item => {return item.value}),type: 'line',name: '22',},{name:'33',type:'line',markLine: markLine,},],}const options4 = {xAxis:{...defaultOption.xAxis[0],data: (obj[0]?obj[0][0]:null)?.data.map(item => {return item.time}),type: 'category',},color:['#FFDB26', '#579AFF', '#72BF68', '#01C8CF', '#FF5962'],legend:[{data:[{name: '11', icon: 'rect'},{name: '22', icon: 'rect'},{name: '33', icon: 'rect'},{name: '44', icon: 'rect'},// 重点设置{name: '55',itemStyle: { opacity: 0 },lineStyle:{type:'dotted',},},],selectedMode:'multiple',itemWidth: 14,itemHeight: 4,top:20,textStyle: {fontSize: 14,height: 12,color: '#fff',rich: {a: {verticalAlign: 'media',},},},},],series:[{data: (obj[0]?obj[0][0]:null)?.data.map(item => {return item.value}),type: 'line',name: '11',},{data: (obj[1]?obj[1][0]:null)?.data.map(item => {return item.value}),type: 'line',name: '22',},{data: (obj[2]?obj[2][0]:null)?.data.map(item => {return item.value}),type: 'line',name: '33',},{data: (obj[3]?obj[3][0]:null)?.data.map(item => {return item.value}),type: 'line',name: '44',},// 重点设置{name:'55',type:'line',symbol:'none',markLine: markLine,},],}const options = !haveFourCol?options2:options4// 判断是 否存在 多数据const optionsBlo = !haveFourCol?(obj.finalSupportPressure && obj.finalSupportPressure.length):(obj[0] && obj[0].length)if (optionsBlo){return {dataZoom: [{type: 'inside',},{type: 'slider',show: false,},],yAxis: {...defaultOption.yAxis[0],type: 'value',max:haveFourCol?60:null,},grid: {left: 50,right: 25,top: 60,bottom: 30,},tooltip: {trigger: 'axis', // 触发类型;轴触发,axis则鼠标hover到一条柱状图显示全部数据,item则鼠标hover到折线点显示相应数据,axisPointer: {  // 坐标轴指示器,坐标轴触发有效,type: 'line', // 默认为line,line直线,cross十字准星,shadow阴影crossStyle: {color: '#fff',},},},...options,}}else {return {title: {left: 'center',top: 'center',textStyle: {fontSize: 14,},subtext: '暂无数据!',},}}
}

这篇关于关于echars 操作legend 解决方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/667933

相关文章

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

动手学深度学习【数据操作+数据预处理】

import osos.makedirs(os.path.join('.', 'data'), exist_ok=True)data_file = os.path.join('.', 'data', 'house_tiny.csv')with open(data_file, 'w') as f:f.write('NumRooms,Alley,Price\n') # 列名f.write('NA

线程的四种操作

所属专栏:Java学习        1. 线程的开启 start和run的区别: run:描述了线程要执行的任务,也可以称为线程的入口 start:调用系统函数,真正的在系统内核中创建线程(创建PCB,加入到链表中),此处的start会根据不同的系统,分别调用不同的api,创建好之后的线程,再单独去执行run(所以说,start的本质是调用系统api,系统的api

Java IO 操作——个人理解

之前一直Java的IO操作一知半解。今天看到一个便文章觉得很有道理( 原文章),记录一下。 首先,理解Java的IO操作到底操作的什么内容,过程又是怎么样子。          数据来源的操作: 来源有文件,网络数据。使用File类和Sockets等。这里操作的是数据本身,1,0结构。    File file = new File("path");   字

MySQL——表操作

目录 一、创建表 二、查看表 2.1 查看表中某成员的数据 2.2 查看整个表中的表成员 2.3 查看创建表时的句柄 三、修改表 alter 3.1 重命名 rename 3.2 新增一列 add 3.3 更改列属性 modify 3.4 更改列名称 change 3.5 删除某列 上一篇博客介绍了库的操作,接下来来看一下表的相关操作。 一、创建表 create

明明的随机数处理问题分析与解决方案

明明的随机数处理问题分析与解决方案 引言问题描述解决方案数据结构设计具体步骤伪代码C语言实现详细解释读取输入去重操作排序操作输出结果复杂度分析 引言 明明生成了N个1到500之间的随机整数,我们需要对这些整数进行处理,删去重复的数字,然后进行排序并输出结果。本文将详细讲解如何通过算法、数据结构以及C语言来解决这个问题。我们将会使用数组和哈希表来实现去重操作,再利用排序算法对结果

UE5 半透明阴影 快速解决方案

Step 1: 打开该选项 Step 2: 将半透明材质给到模型后,设置光照的Shadow Resolution Scale,越大,阴影的效果越好

封装MySQL操作时Where条件语句的组织

在对数据库进行封装的过程中,条件语句应该是相对难以处理的,毕竟条件语句太过于多样性。 条件语句大致分为以下几种: 1、单一条件,比如:where id = 1; 2、多个条件,相互间关系统一。比如:where id > 10 and age > 20 and score < 60; 3、多个条件,相互间关系不统一。比如:where (id > 10 OR age > 20) AND sco

PHP7扩展开发之流操作

前言 啥是流操作?简单来讲就是对一些文件,网络的IO操作。PHP已经把这些IO操作,封装成流操作。这节,我们将使用PHP扩展实现一个目录遍历的功能。PHP示例代码如下: <?phpfunction list_dir($dir) {if (is_dir($dir) === false) {return;} $dh = opendir($dir);if ($dh == false) {ret

浙大数据结构:树的定义与操作

四种遍历 #include<iostream>#include<queue>using namespace std;typedef struct treenode *BinTree;typedef BinTree position;typedef int ElementType;struct treenode{ElementType data;BinTree left;BinTre