关于echarts中使用到的图例、颜色设置、设置tooltip换行显示等问题

最近使用echarts中用到图例随机生成，颜色多不好设置的问题，图例多展示出现不全，不能根据颜色判断图例和数据的问题等总结一下

原始代码：

that_ge.charts = echarts.init(document.getElementById('paramenterEcharts'));that_ge.alarmTypeLine = ['风速1','风速2','风速3','风速4','风速5','风速6','风速7','风速8','风速9','风速10','风速11','风速12','风速13','风速14','风速15',]that_ge.charts.setOption({color: that_ge.randerColor(),tooltip: {trigger: 'axis',show:true, //这些是防止过多看不到，根据自己的需要进行注释就行。showDelay:0,//这些是防止过多看不到，根据自己的需要进行注释就行。hideDelay:50,//这些是防止过多看不到，根据自己的需要进行注释就行。padding:10,//这些是防止过多看不到，根据自己的需要进行注释就行。confine:true,//这些是防止过多看不到，根据自己的需要进行注释就行。formatter:e=>{ // 遍历出图标和颜色、数值var tip = "";if(e !== null && e.length > 0){tip += e[0].name + '<br/>';for(let i=0;i<e.length;i++){if(i % 3  === 0){tip += e[i].marker + e[i].seriesName + ": " + e[i].value + "<br/>";}else{tip += e[i].marker + e[i].seriesName + ": " + e[i].value + "&nbsp;&nbsp;";}}return tip;}}},grid: {left: '4%',top:'2%',},legend: {left: 'right', // 水平位置，可选值：'left', 'center', 'right'type: 'scroll', // 使用滚动分页的图例right: 100,           top: 30,        bottom: 20,  orient: 'vertical', // 可选值：'horizontal' 或 'vertical'    // data:legendData,              },xAxis: [{type: 'category',axisTick: {alignWithLabel: true},// data: val.data.xtimes,data: [1,2,3,4,5,6,7,8,9],axisLabel:{color:"#22b8ff",},},],dataZoom: [//X轴鼠标滑动{show: true,realtime: true,start: 0,end: 100},{type: 'inside',realtime: true,start: 0,end: 100}],yAxis: {type: 'value'},series: [{name: '风速1',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速2',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速3',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速4',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速5',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速6',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速7',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速8',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速9',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速10',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速11',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速12',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速13',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速14',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速15',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速16',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速17',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速18',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速19',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速20',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速21',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速22',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速23',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速24',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速25',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速26',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速27',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速28',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速29',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速30',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速31',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速32',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速33',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速34',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速35',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速36',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速37',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速38',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速39',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},{name: '风速40',type: 'line',data: [4,5,6,8,9,4,12,3,12],smooth: true,},]})

这个是在随机生成颜色中要使用的图例内容一定要写上。

这个声明在data(){

        return{

                alarmTypeLine:'',//echarts图标名称

        }

}

随机生成的颜色代码：


randerColor(){ //echarts图颜色let arr = [];this.alarmTypeLine.forEach(item=>{this.random(arr)})return arr;},random(arr){ //echarts图颜色let color = 'rgb(' + [Math.round(Math.random() * 256),Math.round(Math.random() * 256),Math.round(Math.random() * 256)].join(',') + ')';if(!arr.some(i=>i==color)){arr.push(color)}else{this.random(arr)}},

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

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

相关文章

（四）共享模型之内存

（四）共享模型之内存

本章内容 上一章讲解的 Monitor 主要关注的是访问共享变量时&#xff0c;保证临界区代码的原子性 这一章我们进一步深入学习共享变量在多线程间的【可见性】问题与多条指令执行时的【有序性】问题 Java 内存模型 JMM 即 Java Memory Model&#xff0c;它定义了主存、工作内存…
阅读更多...
firewalld(3)zone配置

firewalld(3)zone配置

简介 前面文章我们已经介绍了firewalld的安装&#xff0c;配置文件介绍、简单的规则查询&#xff0c;本篇文章主要介绍zone的配置。前面我们介绍了firewalld默认的zone和不同zone的功能&#xff0c;下面我们就直接进入zone的具体配置使用。 配置zone的方式 图形配置工具…
阅读更多...
浅析基于量子成像的下一代甚高灵敏度图像传感器技术

浅析基于量子成像的下一代甚高灵敏度图像传感器技术

高灵敏度探测成像是空间遥感应用中的一个重要技术领域&#xff0c;如全天时对地观测、空间暗弱目标跟踪识别等应用&#xff0c;对于甚高灵敏度图像传感器的需求日益强烈。随着固态图像传感器技术水平的不断提高&#xff0c;尤其背照式及埋沟道等工艺的突破&#xff0c;使得固态…
阅读更多...
马拉松报名小程序的设计

马拉松报名小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;赛事信息管理&#xff0c;赛事报名管理&#xff0c;活动商城管理&#xff0c;留言板管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;赛事信息&…
阅读更多...
Python考前复习

Python考前复习

选择题易错&#xff1a; python3不能完全兼容python2内置函数是python的内置对象之一&#xff0c;无需导入其他模块python中汉字变量合法&#xff0c;如“小李123”合法&#xff1b;但T-C不合法&#xff0c;因为有“-”集合无顺序&#xff0c;不能索引&#xff1b;range(5)[2]…
阅读更多...
【python全栈系列】day09-python数据类型转换

【python全栈系列】day09-python数据类型转换

在Python中&#xff0c;数据类型转换是一项非常常见的操作&#xff0c;它允许我们将一种类型的数据转换为另一种类型。这种转换在处理来自不同源的数据时尤其有用&#xff0c;例如用户输入、文件读取或网络数据等。下面&#xff0c;我将通过代码示例来展示如何将其他数据类型转…
阅读更多...
ABAC模型

ABAC模型

属性基访问控制&#xff08;Attribute-Based Access Control&#xff0c;ABAC&#xff09;是一种动态和细粒度的访问控制模型&#xff0c;通过评估用户属性、资源属性、环境属性和动作属性来决定访问权限。这种模型比传统的角色基访问控制&#xff08;RBAC&#xff09;更灵活&a…
阅读更多...
json数据的解析

json数据的解析

1. Json是什么&#xff1f; JavaScript Object Natation, 一种轻量级的数据交换格式, 与XML一样, 广泛被采用的客户端和服务端交互的解决方案&#xff01;具有良好的可读和便于快速编写的特性。 2. Json与XML的比较 JSON和XML的数据可读性基本相同; JSON和XML同样拥有丰富的…
阅读更多...
手动访问mongo和ES插入和查询

手动访问mongo和ES插入和查询

1、手动访问mongo 1.1、mongo连接数据库 1.2、mongo插入和查询 db.hmf_test.insert( { "aoeId": "1", "aoeAes": "吴秀梅", "aoeSm4": "北京xx网络技术有限公司.", "aoeSm4_a": "…
阅读更多...
构建可扩展的Java Web应用架构

构建可扩展的Java Web应用架构

构建可扩展的Java Web应用架构 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在现代软件开发中&#xff0c;可扩展性是一个至关重要的概念。构建一个可扩展的…
阅读更多...
2pc 3pc

2pc 3pc

2pc&3pc问题 本质&#xff1a; 2pcTM超时机制 3pc加入事务询问机制RM超时机制 事务询问机制&#xff1a;减少阻塞 RM超时机制&#xff1a;避免死锁 2pc 3pc 参考&#xff1a; https://juejin.im/post/5aa3c7736fb9a028bb189bca#heading-1 https://blog.csdn.net/xj1…
阅读更多...
Spring Boot 文件上传和下载指南：从基础到进阶

Spring Boot 文件上传和下载指南：从基础到进阶

文章目录 引言1. 环境配置2. 文件上传2.1 配置文件上传路径2.2 创建上传服务2.3 创建上传控制器 3. 文件下载3.1 创建下载服务3.2 创建下载控制器 4. 前端页面4.1 文件上传页面4.2 文件下载页面 5. 技术分析结论 &#x1f389;欢迎来到SpringBoot框架学习专栏~ ☆* o(≧▽≦)o …
阅读更多...
Java并发编程中的常见陷阱及解决方案

Java并发编程中的常见陷阱及解决方案

Java并发编程中的常见陷阱及解决方案 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java编程中&#xff0c;并发编程是一项高级技能&#xff0c;能够显著提…
阅读更多...
iOS多target时怎么对InfoPlist进行国际化

iOS多target时怎么对InfoPlist进行国际化

由于不同target要显示不同的App名称、不同的权限提示语&#xff0c;国际化InfoPlist文件必须创建名称为InfoPlist.strings的文件&#xff0c;那么多个target时怎么进行国际化呢&#xff1f;步骤如下&#xff1a; 一、首先我们在项目根目录创建不同的文件夹对应多个不同的targe…
阅读更多...
1-2 什么是自然语言处理

1-2 什么是自然语言处理

1-2 什么是自然语言处理 主目录点这里 自然语言处理是计算机学科、人工智能与语言学领域的一个交叉学科&#xff0c;主要研究如何让计算机能够理解、处理、生成和模拟人类语言的能力&#xff0c;从而实现与人类进行自然语言对话的能力。 如上图&#xff0c;你好通过自然语言处…
阅读更多...
笔记：SpringBoot+Vue全栈开发

笔记：SpringBoot+Vue全栈开发

笔记&#xff1a;SpringBootVue全栈开发 1. 开发环境热部署2. SpringBoot RestController的使用3. SpringBoot实现文件上传4. 配置拦截器5. Restful服务Swagger6. 使用MyBatis-Plus进行数据库操作7. 多表查询、条件查询及分页查询 1. 开发环境热部署 使用spring-boot-devtools…
阅读更多...
opencv第一课-cnblog

opencv第一课-cnblog

opencv第一课 创建窗口 import timeimport cv2 #创建窗口 cv2.namedWindow(window,cv2.WINDOW_NORMAL)#cv2.WINDOW_AUTOSIZE自动大小&#xff0c;不允许修改窗口大小#更改窗口的大小 cv2.resizeWindow(window,800,600)#展示名字为window的窗口 cv2.imshow(window,0)key cv2.w…
阅读更多...
MATLAB模拟数字签名过程

MATLAB模拟数字签名过程

在 MATLAB 中实现数字签名和验证，我们使用 MATLAB 的 java.security 包提供的功能。 以下是一个示例代码，用于生成和验证数字签名。 % MATLAB Digital Signature and Verification% Generate a key pair (public and private keys) import java.security.* keyGen = KeyPai…
阅读更多...
vue中如何使用echarts和echarts-gl实现三维折线图和三维柱状图

vue中如何使用echarts和echarts-gl实现三维折线图和三维柱状图

一、vue中使用三维折线图 效果图&#xff1a; 二、使用步骤 1.引入库 安装echarts 在package.json文件中添加 "dependencies": {"echarts": "^5.1.2""echarts-gl": "^1.1.1",// "echarts-gl": "^2.0.8…
阅读更多...
『古籍自有答案』古风H5案例赏析

『古籍自有答案』古风H5案例赏析

「古籍自有答案」&#xff0c;一部由新京报与字节跳动公益联合打造的古风H5&#xff0c;以诗意盎然的开篇引领用户穿梭于千年文脉。 part1. 创意定位 "人生有惑问先贤&#xff0c;先贤答案存古籍"&#xff0c;在这里&#xff0c;每一个灵魂的探问&#xff0c;都能在…
阅读更多...
最新文章

Copyright @ 2022~2023