关于echarts遇到的一些问题

news2024/10/7 10:16:04

1.echarts监听legend,动态设置legend属性无效

动态更改legend中的icon, myChart.setOption(option)失效,但是设置局部就生效

 myChart.on('legendselectchanged', function (params) {
     if (params.selected[params.name]) {
         data1[data.indexOf(params.name)].icon = 'circle'
         myChart.setOption({
             legend: {
               data: data1
             }
           })
     } else {
         data1[data.indexOf(params.name)].icon = 'none'
         myChart.setOption({
             legend: {
               data: data1
             }
           })
     }
 })

2.legend的icon与折线图颜色不一致

主要设置itemStyle

let colors = ['red','green', 'white','yellow', 'pink','blue','orange','gray', 'purple']

legend:{
	data:[
	    name: data[i],
	    icon: 'none',
	    textStyle: {
	        width: 4,
	        type: 'solid',
	        color: colors[i],
	        fontSize: 32,
	        padding: [0, 0, 0, 12],
	    },
	    itemStyle: {
	        color: colors[i], 
	    },
	]
}

在这里插入图片描述

3.tooltip的formatter数据读取是undefined

里面是一个对象和数组,要过滤出数组

 tooltip: {
     trigger: 'axis',
     formatter: function (params) {
         let result = params[0].name + '<br />'
         params.forEach(function (item) {
         //要判断是不是数组
             if (res[item.seriesIndex] instanceof Array) {
             }
        }
    }

4.鼠标移入折线图放大

在series配置项中加入放大缩放配置项

series:[
    symbolSize: 11, 
    emphasis: {
        scale:2,
    },
]

在这里插入图片描述

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

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

相关文章

SSM项目-博客系统

在线体验项目&#xff1a;登陆页面 项目连接&#xff1a;huhublog_ssm: 个人博客系统 技术栈&#xff1a;SpringBoot、SpringMVC、Mybatis、Redis、JQuery、Ajax、Json (gitee.com) 1.项目技术点分析 SpringBoot、SpringWeb(SpringMVC)、MyBatis、MySQL(8.x)、Redis(存储验…

Elastic的下载

文章目录 ElasticSearch的下载扩展1&#xff08;ElasticSearch 与 JDK 版本 适配&#xff09;扩展2&#xff08;访问 http://192.168.1.200:9200 没有显示信息&#xff09;扩展3&#xff08;免密登录&#xff09; ElasticSearch的下载 官方下载网址&#xff1a;https://www.el…

antd design 多个弹框设置区分状态的技巧

可以使用 enum 枚举的方式去做区分 // 置管状态区分 // eslint-disable-next-line no-shadow export enum catheteringType {ADD add,EDIT edit,EXAMINE examine, } 引入上述代码接着设置状态 // 置管记录弹框/状态区分const [catheteringModalTypeConfig, setCatheterin…

全志D1-H (MQ-Pro)驱动 OV5640 摄像头

内核配置 运行 m kernel_menuconfig 勾选下列驱动 Device Drivers ---><*> Multimedia support --->[*] V4L platform devices ---><*> Video Multiplexer[*] SUNXI platform devices ---><*> sunxi video input (camera csi/mipi…

DP与EDP接口协议学习

文章目录 一、概念介绍DP----DisplayPort&#xff0c;一种标准化数字式视频接口&协议EDP---Embedded DisplayPort&#xff0c;DP协议在嵌入式领域拓展DP和HDMI对比----HDMI当前应用更广&#xff0c;DP是PC领域推出协议 二、DP&EDP相关协议分析三条数据通路Manlink 、Au…

赛码网-打字100%AC代码(C语言)

———————————————————————————————————— ⏩ 大家好哇&#xff01;我是小光&#xff0c;嵌入式爱好者&#xff0c;一个想要成为系统架构师的大三学生。 ⏩最近在准备秋招&#xff0c;一直在练习编程。 ⏩本篇文章对赛码网的打字题目做一个详…

ViSQOL、PESQ、mosnet等mos分打分工具和Polqa语音感知音质打分测评

原创&#xff1a;转载需附链接&#xff1a; https://blog.csdn.net/qq_37100442/article/details/132057139?spm1001.2014.3001.5502 一、背景 Mos分评价音质重要指标&#xff0c;最近也有很多机构和公司在研究适合自己的评价体系。目前Mos分主要分为主观评测和客观感知评价。…

49. 海豚记账簿软件(b站的一个小项目)

闲着也是闲着就跟着别人做了一个小项目 目录 1.需求和目标 2.整体功能描述 3.核心思路 4.全部代码 1.需求和目标 项目的需求&#xff0c;实现一个叫做“海豚记账簿”的基于命令行界面的家庭记账软件。 2.整体功能描述 这个软件相对简单&#xff0c;只需要基于命令行做纯…

【数据结构OJ题】移除元素

原题链接&#xff1a;https://leetcode.cn/problems/remove-element/ 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 方法一&#xff1a;暴力删除&#xff0c;挪动数据覆盖。即遍历整个nums[ ]数组&#xff0c;遇到值等于val的元素&#xff0c;就将整…

Eclipse如何自动添加作者、日期等注释

一、创建类时自动添加注释 1、Window->Preferences 2、Java->Code Syle->Code Templates->Code->New Java files->Edit->要添加的注释->Apply 二、选中要添加的类或者方法通过AltShiftJ快捷键添加 1、Window->Preferences 2、Java->Code Syle…

IP地址、网关、子网掩码

通过SSH将Ubuntu的盘映射到Windows下面去&#xff0c;以及在VsCode通过SSH Server或者在MobaXterm中通过SSH连接到远程ubuntu服务器&#xff0c;但由于之前Ubuntu的网络是自动连接的&#xff0c;IPv4经常会改变&#xff0c;就会导致上述三个远程连接都需要重新配置。 故由DHCP自…

ETHERCAT转PROFIBUS网关连接安川伺服支持EtherCAT总线吗

捷米JM-DP-ECT&#xff0c;是自主研发的一款PROFIBUS从站功能的通讯网关&#xff0c;它的主要功能是将ETHERCAT设备接入到PROFIBUS网络中。 JM-DP-ECT这个小小的网关可不简单&#xff0c;连接到PROFIBUS总线中做为从站使用&#xff0c;连接到ETHERCAT总线中做为从站使用。 1.2…

DAY03_Spring—SpringAOPAOP切入点表达式AOP通知类型Spring事务管理

目录 一 AOP1 AOP简介问题导入1.1 AOP简介和作用1.2 AOP中的核心概念 2 AOP入门案例问题导入2.1 AOP入门案例思路分析2.2 AOP入门案例实现【第一步】导入aop相关坐标【第二步】定义dao接口与实现类【第三步】定义通知类&#xff0c;制作通知方法【第四步】定义切入点表达式、配…

kafka-保证数据不重复-生产者开启幂等性和事务的作用?

1. 生产者开启幂等性为什么能去重&#xff1f; 1.1 场景 适用于消息在写入到服务器日志后&#xff0c;由于网络故障&#xff0c;生产者没有及时收到服务端的ACK消息&#xff0c;生产者误以为消息没有持久化到服务端&#xff0c;导致生产者重复发送该消息&#xff0c;造成了消…

SpringMVC -- REST风格开发,RESTful快速开发、RESTful注解开发

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaweb 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 REST 一、REST简介1.1REST风格简介 二、RESTful入门案例2.…

SpringBoot集成Logback日志

SpringBoot集成Logback日志 文章目录 SpringBoot集成Logback日志一、什么是日志二、Logback简单介绍三、SpringBoot项目中使用Logback四、概念介绍一、日志记录器Logger1.1、日志记录器对象生成1.2、记录器的层级结构1.3、过滤器1.4、logger设置日志级别1.5、java代码演示1.6、…

【资料分享】全志科技T507-H工业核心板规格书

1 核心板简介 创龙科技SOM-TLT507是一款基于全志科技T507-H处理器设计的4核ARM Cortex-A53全国产工业核心板&#xff0c;主频高达1.416GHz。核心板CPU、ROM、RAM、电源、晶振等所有元器件均采用国产工业级方案&#xff0c;国产化率100%。 核心板通过邮票孔连接方式引出MIPI C…

防火墙第四次作业

1. 什么是IDS&#xff1f; IDS是&#xff1a;入侵检测系统&#xff08;intrusion detection system&#xff0c;简称“IDS”&#xff09;是一种对网络传输进行即时监视&#xff0c;在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备。它与其他网络安全设备的不同之…

K8s中的核心技术Helm

1.helm的引入 &#xff08;1&#xff09;编写yaml文件 &#xff08;2&#xff09;编写deployment文件 &#xff08;3&#xff09;编写service文件 &#xff08;4&#xff09;编写Ingress文件 2.helm的引入解决的问题&#xff1f; &#xff08;1&#xff09;使用helm可以把…

CommStudio for .NET Crack

CommStudio for .NET Crack CommStudio for.NET使您的应用程序可以轻松地使用串行端口和调制解调器进行通信。CommStudio for.NET是一套全面的组件和可视化调试工具&#xff0c;可将远程系统和设备与visual Studio 2005和visual Studio 2008集成。开发与遗留系统和外部设备集成…