Echarts图例legend选中select状态动态更新(踩坑)

2023-10-27

今天计划实现一个小功能,但是却在细节上浪费了大量的时间,特此记录。

想要实现的功能是这样的,如下一个ECharts图,后台会一次性接收85条曲线的数据,但在初始化的时候只显示前7条曲线。
在这里插入图片描述
官方文档 给出了 legend. selected 这个属性,可以修改选中的图例。

legend: {
	selected: {
	    // 选中'系列1'
	    '系列1': true,
	    // 不选中'系列2'
	    '系列2': false
	}
}

有两种方式传递数据:

  1. 使用静态数据:'系列1': true
  2. 使用Object变量:{key:value}

要想实现动态更新,就只能用Object变量。我们继续:

//第一步
var selectedArray = {};//定义一个Object对象
var selectedArray = new Object();//此种方式也可以定义一个Object对象
//第二步
selectedArray ['No1'] = true;//添加数据,key='No1',value='true'
selectedArray ['No2'] = true;//添加数据,key='No2',value='true'
…………
//第三步
chart.setOption({
	……
	legend: {
		selected: selectedArray //绑定数据
	}
	……
})

完成! ~~

在第二步的时候,有一个大坑
selectedArray ['No1'] = true;
这句代码中的 true 如果写成了 'true'
就会造成ECharts无法识别传入数据的情况,并且还不会报错!
并且如果用console.log输出检查的话,也查不出任何错误!
足足浪费了四个小时,网上所有的方法都没找到……

剩下的功能还没做完,看来今天的熬夜了
害,继续加油吧!

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

Echarts图例legend选中select状态动态更新(踩坑) 的相关文章

  • 强制 Firefox 在 img.src 更改后重新加载图像

    我正在修改画布上的一些图像 然后将这些图像的 src 设置为新的 Base64 编码图片 img src changeColor img 更改颜色返回 base64 编码图像 return canvas toDataURL Chrome 和
  • 使用 CSS 的样式选择选项

    我正在尝试使用 CSS 设置选择选项列表的样式 我希望列表的时间之间有更多的填充 因为它们似乎被压在一起 我尝试向选项元素添加填充 但这似乎不起作用 有任何想法吗 这是我的代码 HTML
  • 为什么我的图标在 DIV 布局中从上到下排列而不是从左到右排列?

    我将这 3 个图标包含在单独的 DIV 中 所有这些图标都包含在一个 DIV 中 div div class divicon img src icons text png class icon div div class divicon i
  • YouTube 360​​ 视频 iframe 无法在移动浏览器中工作

    我正在尝试为 YouTube 360 视频获取嵌入的 iframe 以便在我的移动网站上播放 它在桌面浏览器上运行良好 但在移动浏览器中我只能播放平面立体视图 我可以确认它绝对是一个 HTML5 播放器 这显然是其他人正在经历的一个未解决的
  • (IE 特定)如何确定输入的文本是否比输入元素的宽度长

    这是所有版本 IE 特有的问题 在所有其他浏览器中 当文本溢出时 输入元素的scrollWidth 大于输入元素的clientWidth 有没有办法确定IE中输入字段中的文本超出了输入元素宽度的键 下面是一个检查 clientWidth 与
  • 计算div中有多少个元素

    我有一个div 里面有span 有没有一种方法可以计算 div 中有多少个元素 然后将其作为值给出 例如 一个 div 中有 5 个跨度 那么它会对其进行计数并发出警报 5 请使用 JavaScript 谢谢 如果你想要后代的数量 你可以使
  • 使用他们的 API 创建一个基本的 MailChimp 注册表单

    我是 MailChimp 的新手 需要一些帮助 通过他们的基本时事通讯注册表单 您只需将一些预先打包的 HTML 嵌入到您的页面中即可 然而 这样做的问题是 单击 提交 会重定向到 MailChimp 页面 我不想重定向到 MailChim
  • charset-utf8 和字符实体

    我建议将我的 windows 1252 XHTML 网页转换为 UTF 8 我的编码中有以下字符实体 39 撇号 9658 右指针 9668 左指针 如果我使用编辑器更改字符集并将页面保存为 UTF 8 撇号保留为字符实体 指针被转换为代码
  • 保留以下文本的标题

    我正在使用 css 列计数功能将我的部分分成两列 在一个页面上 我在第一列的底部有一个 h3 标题 在下一列的顶部有一个 p 段落 我想保留该段落的前几句话的标题 我可以将其与整个段落一起包装在使用 inline block 样式的 div
  • 为什么插入符号在具有position:relative的contenteditable中不可见?

    When a contenteditable元素有position relative和背景颜色 插入符号放置在该元素中时是不可见的 这是一个例子 bug position relative background color lightgre
  • 使用 angularjs 在 Internet Explorer 中获取 Blob url

    鉴于此代码 来自其他人 var module angular module myApp module controller MyCtrl function scope scope json JSON stringify a 1 b 2 mo
  • 聚合物在核心输入上使用功能验证

    有人可以解释一下如何使用函数验证吗这种聚合物元素 http www polymer project org docs elements core elements html core input 导航到 验证 部分
  • 在跨开口的 Bootstrap 弹出窗口中保留复选框

    我在引导弹出窗口内有复选框 我将其用作表单的一部分 当用户打开弹出窗口 选择一些复选框 关闭弹出窗口 然后重新打开弹出窗口时 我遇到问题 新打开的弹出窗口不会显示用户上次打开弹出窗口时选中的框 我需要用户的选择在弹出窗口启动时保持不变 我猜
  • 如何将 HTML 转换为 Textile?

    我正在抓取一个静态 html 网站并将内容移至数据库支持的 CMS 中 我想在 CMS 中使用 Textile 有没有一种工具可以将 HTML 转换为 Textile 这样我就可以抓取现有网站 将 HTML 转换为 Textile 然后将该
  • 能够使用 Bootstrap 3 网格系统指定选择元素的宽度

    我有以下内容
  • http和https在编程中有什么区别[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我只知道 s 代表 安全 用户永远不
  • 如何将本地文本文件上传到文本区域(网页内)

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一
  • CSS如何制作可滚动列表

    我正在尝试创建一个由标题和标题下方的项目列表组成的网页 我希望项目列表可以垂直滚动 我还希望网页占据整个窗口 但不要更大 目前我的问题是项目列表不可滚动 而是延伸到窗口底部下方很远 这导致窗口可滚动 应该做什么CSS属性位于html bod
  • SVG线宽问题

    我开始了我的svg学习 我想用svg线做一些技巧吧 但有件事我不明白 我为每个技能创建 2 行 一行是空的 另一行是知识百分比 问题是 前两行的高度是我给出的笔画宽度的一半 其他线都有很好的高度 这是一个 jsbin http jsbin
  • 在“onClick”上切换 DIV 高度

    我想切换分区的高度 我尝试过将 animate 与 if else 语句一起使用 但它只会反弹 我现在使用的代码将隐藏我的分区而不是切换高度 点击时会触发 document ready function content1 toggle fu

随机推荐

  • Dynamic 356 OP 9.0版本 同服务器环境还原DB导入组织报错

    环境 Dynamic 365 9 0 6 9 PRD和UAT组织在同一套服务器环境中 操作 1 备份PRD数据库 还原到UAT数据库 2 在CRM部署管理器中导入UAT组织数据库 提示错误如下 12 31 12 Verbose Databa
  • 代码简洁3 —— 注释

    前段时间在组织代码review时 提到代码可读性问题时 很多人的第一反应竟然是多添加注释 而我始终觉得注释只能是锦上添花 而不能雪中送炭 再多的注释也改变不了代码逻辑组织混乱的现实 反而过多的注释会加重代码阅读的时间 什么也比不上放置良好的
  • 大端模式(big-endian)与小端模式(little-endian)

    参考自 大端模式与小端模式 大端模式是指数据的低位保存在内存的高地址中 而数据的高位保存在内存的低地址中 小端模式是指数据的低位保存在内存的低地址中 而数据的高位保存在内存的高地址中 大小端模式的由来 在计算机系统中 我们是以字节为单位的
  • 【Caffe】官方例程之R-CNN物体检测

    R CNN is a state of the art detector that classifies region proposals by a finetuned Caffe model For the full details of
  • kvm cpu的亲和性绑定配置

    1 CPU的绑定配置 进程的处理器亲和性 process affinity 指将进程绑定到特定的一个或多个cpu上去执行 而不允许将进程调度到其他cpu上 物理cpu 表示真实的cpu个数 逻辑cpu 表示所有拥有一个完整真实cpu功能的单
  • nodejs npm 安装报错 无法安装 behind a proxy

    npm ERR Error connect ECONNREFUSED npm ERR at errnoException net js 878 11 npm ERR at Object afterConnect as oncomplete
  • Where-are-they-looking-PyTorch 代码Error: Bool value of Tensor with more than one value is ambiguous

    在Where are they looking PyTorch中的utils py中有一个判断 if temp lt best best temp 报出 Error Bool value of Tensor with more than o
  • Puppet

    1 Puppet简介 Puppet使用一种描述性语言来定义配置项 配置项中被称为 资源 描述性语言可以声明用户的配置状态 比如声明一个软件包应该被安装或一个服务应该被启动等 Puppet可以运行在一台服务器端 每个客户端通过SSL证书连接到
  • 机器学习在工业应用中的新思考

    人工智能在学术界默默发展了很多很多年 从最早的神经网络 到10年前风靡的SVM bagging and boosting 如今的深度学习 日新月异 各领风骚数几年 工业界的发展从最早应用于纯粹的互联网企业 近几年开始应用到更多更广泛的场景
  • Win32环境下两种用于C++的线程同步类

    线程同步是多线程程序设计的核心内容 它的目的是正确处理多线程并发时的各种问题 例如线程的等待 多个线程访问同一数据时的互斥 防死锁等 Win32提供多种内核对象和手段用于线程同步 如互斥量 信号量 事件 临界区等 所不同的是 互斥量 信号量
  • RPC流程一 - proto编写

    参考 https github com goyas goya rpc tree master src 对RPC中的Server端和Client端流程进行整理 代码目录 CMakeLists txt config cmake sample e
  • 手把手教你用代码实现 SSO 单点登录

    点击上方 Java基基 选择 设为星标 做积极的人 而不是积极废人 每天 14 00 更新文章 每天掉亿点点头发 源码精品专栏 原创 Java 2021 超神之路 很肝 中文详细注释的开源项目 RPC 框架 Dubbo 源码解析 网络应用框
  • SSH连接慢的问题

    维护linux经常需要使用ssh进行连接 但是有时会很郁闷的发现ssh连接部分机器的时候特别的慢 之前写过一篇文章
  • 【数字IC精品文章收录】近500篇文章

    数字IC全站文章索引demo版 建议收藏慢慢看 一 项目说明 1 1 索引目的 1 2 收录原则 1 3 投稿方式 1 4 版本迭代 二 数字IC学习路线 三 通用技能篇 3 1 数字电路 3 2 硬件描述语言 Verilog 3 3 li
  • React常见面试题

    React常见面试题 1 说说你对react的理解 有哪些特性 2 说说Real DOM和Virtual DOM的区别 优缺点 3 说说React生命周期有哪些不同的阶段 每个阶段对应的方法 4 说说React中setState执行机制 5
  • 【应用笔记】Sub-1G系列产品CW32W031单片机CAD应用参考

    一 功能介绍 CW32W031 的射频部分支持 CAD 中断 从 Deepsleep 进入 STB3 开启 CAD 功能并进入 RX 模式后 CW32W031 会检测信道中是否会有 ChirpIOT 信号 如果存在将 CAD IRQ 置高
  • 袁红岗的程序员修炼之道

    袁红岗的程序员修炼之道 转载引言 袁红岗1994年加盟金蝶 1996年在整个行业还处在DOS时代时最早成功开发出基于Windows平台的金蝶财务软件 开创了依靠技术创新推动企业快速发展的典范 1998年成功开发出基于三层结构组件技术的金蝶K
  • 解决Jenkins报告在浏览器无法显示问题

    在使用jenkins定时启动并收集测试报告的过程中 发现在jenkins上配置的HTML Report打开之后样式不对 页面一片空白 打开开发者模式 发现页面有很多脚本报错 提示有很多资源文件被禁止加载了 百度之后 发现这个是jenkins
  • 【JavaScript】花点时间了解执行上下文

    引言 当我们在浏览器中运行JavaScript代码时 浏览器会先创建一个全局执行上下文 Global Execution Context 然后逐行解析和执行代码 执行上下文是JavaScript中非常重要的概念 它决定了代码的执行顺序和作用
  • Echarts图例legend选中select状态动态更新(踩坑)

    今天计划实现一个小功能 但是却在细节上浪费了大量的时间 特此记录 想要实现的功能是这样的 如下一个ECharts图 后台会一次性接收85条曲线的数据 但在初始化的时候只显示前7条曲线 官方文档 给出了 legend selected 这个属