echarts图例legend选中状态动态设置 selected

2023-05-16

功能前端页面展示,需要对所有指标的图例默认选中状态只显示前两个,其他指标的图例状态默认为灰色。
1、因为所有的指标为动态加载的,因此图例legend选中状态也要通过js进行动态加载,从官方的文档里可以查询到legend.selected配置项可以设置图例的默认状态。
官方示例,true为选中展示系列,false为灰色默认不展示该系列:
selected: {
    // 选中'系列1'
    '系列1': true,
    // 不选中'系列2'
    '系列2': false
}
 
2、js代码
//图例配置项
legend: {
x: 'center',
y: 'bottom',
data: $scope.key_value,
selected:{}
},
 
//js动态加载
var selected_item = {};
for(i =0; i < $scope.key_value.length; i++){
var key_name = $scope.key_value[i];
if(i >1){
selected_item[key_name] = false;
}else{
selected_item[key_name] = true;
}
};
option.legend.selected = selected_item;
//标红是踩过的坑 原始写法selected_item.key_name = false; 会报错,原因是: json 解析时 key_name 都按字符串解析,不识别变量.
 
下面附加一下动态给对象添加属性和值得两种常用法法

              function Person(){};
              var person = new Person();
              person.name = 'yy';
              person.gender = 'girl';
              console.log(person.name+','+person.gender);//yy,girl
              delete person.name;//删除属性
              console.log(person.name);//undefined
  //            变式
              function Person(){};
             var person = new Person();
             person['name'] = 'yy';
             person['gender'] = 'girl';
             console.log(person.name+','+person.gender);//yy,girl
             delete person.name;//删除属性
             console.log(person.name);//undefined          
 

转载于:https://www.cnblogs.com/hanlengyao/p/10249798.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

echarts图例legend选中状态动态设置 selected 的相关文章

  • ggplot2:如何为添加到散点图的线添加图例?

    我有一些 x 和 y 数据 我想在 ggplot2 散点图上进行比较 我想添加统一线 y x 双重线 y 2x 一半线 y x 2 和更平滑的线来帮助理解数据 但我找不到如何将这些线添加到情节的传奇 任何想法 set seed 123 x
  • Chartjs 标签和图例

    我有一个包含一些 ChartJS 的应用程序 图表运行良好 当鼠标悬停在图表上时会显示图例 如何将图表配置为始终在图表上具有图例和标签值 而不仅仅是在悬停时 None
  • 如何更改ggplot2中图例的背景颜色?

    有谁知道如何更改 ggplot2 中点图例的背景颜色 我已经创建了下面的图 并且想更改图例上的白色背景 有任何想法吗 您可以使用legend key的参数theme From theme legend key 图例键下方的背景 elemen
  • 如何在matlab中的imagesc图中添加图例

    我有以下代码 创建打印到文件的图形 f figure set gcf Visible off imagesc exp genes sorted cut h colorbar set gcf Colormap mycmap set gca x
  • gnuplot:图例隐藏在数据后面

    我是 gnuplot 的新手 在绘制堆积直方图时 我发现图例隐藏在数据后面 有没有办法将图例放在数据上方 非常感谢你的帮助 编辑 我目前正在使用设置键外部底部将图例放置在外部 但这不是我想要的最佳解决方案 最近的版本允许将图例的背景设为白色
  • 如何向此自定义的facet_wrap 添加geom_quantile 图例?

    我最近得到了很大的帮助 https stackoverflow com questions 60655019 why does strip text color from facet wrap not correspond to eleme
  • 使用美观和 geom_text 时从图例中删除“a”

    如何从这段代码生成的图例中删除字母 a 如果我删除geom text 那么 a 字母将不会显示在图例中 我想保留geom text 尽管 ggplot data iris aes x Sepal Length y Sepal Width s
  • 图例显示带有 geom_vline 的意外黑线

    在查看了 StackOverflow 上提供的一些答案后 我一直试图添加一个额外的图例 但不知何故我无法完成这项工作 我正在使用以下代码 x breaks lt seq as Date 2010 1 1 as Date 2015 4 1 m
  • ggplot legend:更改自动图例的顺序

    当有几组图时 我正在努力处理 ggplot 中的图例顺序 这是一个例子 library ggplot2 library data table data lt data table time rep 1 50 4 dampingtime re
  • 如何直接使用栅格属性表对栅格进行图例并仅显示栅格中显示的类的图例?

    我想使用栅格属性表信息来创建栅格的图例 例如栅格1 https i stack imgur com tgC2P png并仅显示栅格中显示的类的图例 我举了一个例子来解释我想要得到什么 1 构建光栅 r lt raster ncol 10 n
  • 添加覆盖 twinx 轴线条的图例

    我有这个Python代码 它与轴成对ax并在两个轴上绘制一些函数 我将图例绘制在ax1 问题是图例没有覆盖曲线ax2 有可能自动定位传说中的ax通过覆盖线ax2 请注意 在fig legend选项loc best 不可用 我需要在绘图区域内
  • R Leaflet Legend:colorBin-删除中断之间的小数

    我正在使用 Leaflet 库在 R 中创建交互式 HTML 地图 传说中采用的是colorBin用于创建将数据分为 6 个类别的方法 使用min values and max values 我已经定义了美国社区调查收入数据的特定范围可能落
  • 获取GridView中选定行的索引

    我想使用复选框获取从 gridview 选择的行 复选框是这样的
  • 使用 R 将图例添加到绘图中

    我使用 R 在一个图中创建了 4 条线 这是代码 Define 2 vectors cars lt c 123 07 110 51 96 14 98 71 101 3 trucks lt c 110 31 89 91 89 81 89 31
  • Visual Studio 中列表框的上移、下移按钮[重复]

    这个问题在这里已经有答案了 我正在尝试制作一个上移按钮和一个下移按钮 以移动 Microsoft Visual Studio 2012 中列表框中的选定项目 我已经在 WDF jquery winforms 和其他一些表单中看到了其他示例
  • 在Matlab图例中使用Latex?

    我的 matlab 不接受我的 Latex 例如 如果我使用legend b 6 rightarrow b 7 它没有向我显示箭头 我该如何解决这个问题 尝试使用 Latex 解释器 例如 legend b 6 rightarrow b 7
  • 添加图例到散点图

    这个问题已经被问到了 但我想找到一个更清晰的解决方案 给定 X 是 100x2 数据 标签是标签向量 从 1 到 9 我绘制散点图如下 pl scatter X 0 X 1 c labels pl show 如何仅用一行代码添加图例来解释颜
  • 如何在 MATLAB 中为 4 个子图创建一个通用图例?

    如何在 MATLAB 中为 4 个子图创建一个通用图例 如下所示 又快又脏 hSub subplot 3 1 1 plot 1 1 1 1 1 1 1 1 hLegend legend hello i am legend subplot 3
  • 图表外的 JQPlot 图例

    我正在使用 JQPlot 并且在一个 HTML 页面上有很多图表 每个图表都有相同的图例 我的问题是 是否可以完全在图表之外显示图例 并在 HTML 页面或自己的 div 中拥有自己的位置 legend show true renderer
  • ggplot2可以在一个图例中分别控制点大小和线大小(线宽)吗?

    一个使用的例子ggplot2绘制数据点组和连接每组均值的线 并使用相同的映射aes for shape并为linetype p lt ggplot mtcars aes gear mpg shape factor cyl linetype

随机推荐

  • linux安装openssl

    sudo apt get install openssl sudo apt get install libssl dev RedHat centos才是openssl devel
  • IdentityServer4 使用OpenID Connect添加用户身份验证

    使用IdentityServer4 实现OpenID Connect服务端 xff0c 添加用户身份验证 客户端调用 xff0c 实现授权 IdentityServer4 目前已更新至1 0 版 xff0c 在之前的文章中有所介绍 Iden
  • ftp服务器覆盖文件,ftp 覆盖 服务器 文件

    ftp 覆盖 服务器 文件 内容精选 换一换 本章节适用于MRS 3 x之前版本 Loader支持以下多种连接 xff0c 每种连接的配置介绍可根据本章节内容了解 obs connectorgeneric jdbc connectorftp
  • Ubuntu-14.04. sh .py腳本双击無法執行问题的解决方法

    Ubuntu 14 04中默认文件用gedit文本打开 xff0c 而不是BT5里面的默认双击打开四个选择 xff0c 例如以下图 xff08 这是配置完毕后的结果 xff0c 就不换BT5系统了 xff09 xff1a 直接文本打开 xf
  • Ubuntu解决循环登陆问题

    问题描述 xff1a 安装驱动之后重启 xff0c 一直循环在登录页面 解决方法 xff1a Ctrl 43 Alt 43 F1 xff0c 进入命令行界面 1 卸载原来的驱动 sudo apt get remove purge nvidi
  • 【Linux/CentOS】Boolean ftp_home_dir is not defined

    安装完vsftpd软件后 xff0c 因为CentOS系统的SELinux安全策略默认是没有开启FTP服务 xff0c 直接访问会报错500 OOPS xff0c 所以需要修改为允许使用FTP服务 目标 xff1a 希望ftp用户可以访问自
  • LINUX中 设置登录超时

    ssh设置超时时间 ssh连接超时问题解决方案 xff1a 1 修改server端的etc ssh sshd config Client AliveInterval 60 xff03 server每隔60秒发送一次请求给client xff
  • eclipse 停止java程序运行_Eclipse:停止运行代码(java)

    有时 xff0c 我会运行一个偶然包含无限循环之类的程序 Eclipse让我继续编辑程序 xff0c 但速度非常慢 我该如何阻止它 xff1f 我是否想重新启动JVM xff1f 重新启动eclipse本身总是可行的 xff0c 但这会中断
  • Linux 的五个重启命令及具体说明

    一 Linux 的五个重启命令 1 shutdown 2 poweroff 3 init 4 reboot 5 halt 二 五个重启命令的具体说明 shutdown reboot 在linux下一些常用的关机 重启指令有shutdown
  • 如何直接在ftp里编辑文件

    首先要连接ftp xff0c 如何链接ftp 这个我已经分享过 xff0c 如果还有不懂的 xff0c 可以查看下经验分享 xff0c 打开ftp xff0c 并连接你要修改的站点 xff01 下载安装代码编辑器 xff0c 比如EditP
  • 什么是真正的程序员?

    什么是真正的程序员 这篇文章的原文来自 xff1a A Little Printf Story 作者仿照 小王子 中的情节 xff0c 通过小printf遇见的不同类型的程序员 xff0c 最后悟出什么才是真正的程序员 xff01 第一次翻
  • python import ssl失败_Python3.7.5 ssl模块导入失败的解决办法

    import ssl if we can 39 t import it let the error propagate ImportError DLL load failed 找不到指定的程序 遇到问题的过程 xff0c 在windows7
  • Linux学习之CentOS(三十)--SELinux安全系统基础

    您可以通过点击 右下角 的按钮 来对文章内容作出评价 也可以通过左下方的 关注按钮 来关注我的博客的最新动态 如果文章内容对您有帮助 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内容有任何疑问 可以通过评论或发邮件的方式联系我
  • PHP中__FUNCTION__与__METHOD__的区别

    你知道php中 FUNCTION 与 METHOD 的区别吗 xff1f 本文通过一个小例子 xff0c 为大家介绍下二者的区别 xff0c 有兴趣的朋友可以参考下 PHP中 FUNCTION 与 METHOD 的区别 xff0c 主要在以
  • linux设置登录超时,登录失败策略

    1 登录超时 在vi etc profile 末尾加上 如果有就修改 没有就添加 export TMOUT 61 600 单位为秒 10分钟 2 登录失败 在 etc pam d system auth 加上 deny 61 3错误次数 u
  • SecureCRT分屏显示

    Tab右键 或者 Session Manager右键 gt Send to New Tab Group
  • WPF DataGrid多表头/列头,多行头,合并单元格,一列占据多行

    原文 WPF DataGrid多表头 列头 xff0c 多行头 xff0c 合并单元格 xff0c 一列占据多行 先上效果图 xff1a 思路说明 xff1a 这是两个DataGrid xff0c 没有嵌套 xff0c 位置和高度保持一致
  • cookie和session同与异

    面试和工作中有时候碰到cookie和session的同异 xff0c 现在小结如下 xff1a 首先看cookie cookie增删改查 xff1a http www w3school com cn js 1 cookie产生 识别用户 用
  • 阿里云Redis配置公网连接的注意点

    本篇文章是对官方文档中关于配置redis外网链接的补充 xff0c 请大家参考 Redis公网连接 前提条件 要保证进行外网链接配置的这个ecs是能够连接上redis实例的 最简单的办法是在ecs上能够使用ping命令进行验证 xff0c
  • echarts图例legend选中状态动态设置 selected

    功能前端页面展示 xff0c 需要对所有指标的图例默认选中状态只显示前两个 xff0c 其他指标的图例状态默认为灰色 1 因为所有的指标为动态加载的 xff0c 因此图例legend选中状态也要通过js进行动态加载 xff0c 从官方的文档