ECharts饼图图例消失踩的坑

news2024/12/27 5:32:08

在使用Echarts的饼图时,当时做法是在图例数小于8时显示全部的图例,在大于8的时候显示前8个图例。于是用了两种不同的方式处理。导致出现切换时间后图例不显示的情况。
在这里插入图片描述

错误过程:

在进行图例生成时采用了两种不同的方式:
①如果data没有被指定,会自动从当前系列中获取
②如果指定了data,则使用指定的data。
我的做法是在图例数少于8的时候自动获取,图例数大于8的时候自己将前8个图例放入data。
看起来是没有问题的,但是问题在于:
在切换数据周期时:从图例数大于8的月份切换到图例数小于8的月份时图例部分消失。

错误分析:

在切换数据周期时,只是将图例的data设置为了[],但事实上没有delete掉data,所以组件认为data存在。

改进:

在判断图例数小于8之后,delete option.legend.data

  • 通过log看,legend.data确实没有了。但是图例还是有问题。
再次改进

于是想到了之前用过的echarts的一个函数:dispose()。
在切换页面之前,调用dispose()把echarts生成的图卸载掉。
于是在图例数切换到小于8个的时候:

delete option.legend.data
mychart.dispose()

改进之后在数据切换后dispose掉原来的ECharts,最后在生成新的E Charts就可以显示了。

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

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

相关文章

Redis底层源码分析系列(前提准备)

文章目录 一、 面试题二、 源码分析1. 源码导入2. 源码核心部分 一、 面试题 1. redis跳跃列表了解吗?这个数据结构有什么缺点? 2. redis项目里面怎么用? redis的数据结构都了解哪些? 3. redis的zset底层实现? redi…

深入理解Servlet

目录: ServletWeb开发历史Servlet简介Servlet技术特点Servlet在应用程序中的位置Tomcat运行过程Servlet继承结构Servlet生命周期Servlet处理请求的原理Servlet的作用HttpServletRequest对象HttpServletResponse对象ServletContext对象ServletConfig对象Cookie对象与…

Constrained Iterative LQR 自动驾驶中使用的经典控制算法

Motion planning 运动规划在自动驾驶领域是一个比较有挑战的部分。它既要接受来自上层的行为理解和决策的输出,也要考虑一个包含道路结构和感知所检测到的所有障碍物状态的动态世界模型。最终生成一个满足安全性和可行性约束并且具有理想驾驶体验的轨迹。 通常,motion plann…

微信小程序开发系列(二十八)·小程序API如何发送网络请求以及网络请求失败后的解决方法

目录 1. 小程序API介绍 2. 网络请求 2.1 网络请求失败解决方法 2.2 如何跳过域名校验 1. 小程序API介绍 小程序开发框架提供丰富的微信原生API,可以方便的调起微信提供的能力,例如:获取用户信息、微信登录、微信支付等,小…

“antd“: Unknown word.cSpell

你遇到的问题是 VS Code 的 Code Spell Checker 插件在检查拼写时,将 "antd" 标记为未知单词。"antd" 是 Ant Design 的缩写,是一个流行的 React UI 库,不是一个英语单词,所以 Spell Checker 会将其标记为错误…

Microsoft SQL Server 编写汉字转拼音函数

目录 应用场景 举例 函数实现 小结 应用场景 在搜索应用中,我们一般会提供一个搜索框,输入关健字,点击查询按钮以获取结果数据。大部分情况我们会提供模糊查询的形式以在一个或多个字段进行搜索以获取结果。这样可以简化用户的操作&…

游戏资讯网站系统aspnet+sqlserver

aspnet游戏资讯网站系统本网站采用三层架构编写 有增删查改全部功能 使用了objectDataSource 新技术:采用bootstrap前端框架 dntb控件 随着游戏行业的快速发展,越来越多的玩家需要一个了解全面游戏资讯信息的平台。 充分做了可行性分析后,我…

从零学习Linux操作系统 第三十五部分 Ansible中的角色

一、理解roles在企业中的定位及写法 #ansible 角色简介# Ansible roles 是为了层次化,结构化的组织Playbookroles就是通过分别将变量、文件、任务、模块及处理器放置于单独的目录中,并可以便捷地include它们roles一般用于基于主机构建服务的场景中&…

如何将视频内容转换为文字文稿?这三款工具助您实现视频转写!

在日常生活中,有时我们需要将视频中的内容转换为文字文稿以便于搜索、编辑或分享。但选择合适的视频转文字软件可能让人感到困惑。今天我将为您推荐三款优秀的视频转文字工具,它们操作简单、准确高效,能够帮助您快速完成视频内容转写的工作。…

MySQL三种日志

一、undo log(回滚日志) 1.作用: (1)保证了事物的原子性 (2)通过read view和undo log实现mvcc多版本并发控制 2.在事务提交前,记录更新前的数据到undo log里,回滚的时候读…

企业智能化转型的关键步骤与陷阱

目录 前言1 转型的关键步骤1.1 深度学习AI技术课程的重要性1.2 激发创意,开展多样化项目的战略意义1.3 招募机器学习专业人才的加速转型1.4 引入具备领导力的AI领导1.5 建立与AI领导的紧密沟通机制 2 智能化转型的陷阱2.1 谨慎期待AI解决所有问题的智慧2.2 综合考虑…

Docker进阶:深入理解 Dockerfile

Docker进阶:深入理解 Dockerfile 一、Dockerfile 概述二、为什么要学习Dockerfile三、Dockerfile 编写规则四、Dockerfile 中常用的指令1、FROM2、LABEL3、RUN4、CMD5、ENTRYPOINT6、COPY7、ADD8、WORKDIR9、 ENV10、EXPOSE11、VOLUME12、USER13、注释14、ONBUILD 命…

Vue+SpringBoot打造独居老人物资配送系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询社区4.2 新增物资4.3 查询物资4.4 查询物资配送4.5 新增物资配送 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的独居老人物资配送系统,包含了社区档案、…

几何变换 - 图像的缩放、翻转、仿射变换、透视等

1、前言 图像的几何变换是指改变图像的几何结构,大小、形状等等,让图像呈现出具备缩放、翻转、映射和透视的效果 图像的几何变换都比较复杂,计算也很复杂。 例如仿射变换,像素点的位置和灰度值都需要变换。 数字图像处理中利用后向传播的方法,将像素点变换后的位置通过…

统信OUS安装node, npm,vue (亲测有效)

统信OUS安装node, npm,vue (1)查看自己的系统 uname -a(2)进入nodejs官网下载相应版本 (3)找个位置解压,然后复制文件目录 保存好地址,等下要用到 (4)编辑环…

PostgreSQL索引篇 | GiST索引

PostgreSQL版本为8.4.1 (本文为《PostgreSQL数据库内核分析》一书的总结笔记,需要电子版的可私信我) 索引篇: PostgreSQL索引篇 | BTreePostgreSQL索引篇 | GIN索引PostgreSQL索引篇 | Hash索引PostgreSQL索引篇 | TSearch2 全文…

Java高级编程—注解

文章目录 1.注解的概述2.常见的Annotation示例2.1 生成文档相关的注解2.2 在编译时进行格式检查的注解2.3 跟踪代码依赖性,实现替代配置文件功能的注解 3.自定义Annotation4.JDK中的元注解4.1 Retention4.2 Target4.3 Documented & Inherited 5. JDK8中注解的新…

什么是VR虚拟现实创作工具|元宇宙文化旅游|VR设备在线购买

VR虚拟现实创作工具是用于创建、编辑和制作虚拟现实内容的软件或硬件工具。这些工具提供了创作者在虚拟现实环境中进行创作的功能和自由度,使他们能够构建令人惊叹的虚拟世界和交互体验。 以下是一些常见的VR虚拟现实创作工具: 虚拟现实建模工具&#x…

基于STC系列单片机实现PNP型三极管S8550驱动共阳数码管或NPN型三极管S8050驱动共阴数码管功能

Digitron.c #include "Digitron.h" //#include "Key.h" #define uchar unsigned char//自定义无符号字符型为uchar #define uint unsigned int//自定义无符号整数型为uint //uchar code DigitronBitCodeArray[] {0x01,0x02,0x04,0x08,0x10,0x20,0x40,0x8…

还在为写论文焦虑?免费AI写作大师帮你三步搞定!

还在为写论文焦虑?免费AI写作大师-AI帮你三步搞定! 智元兔AI是ChatGPT的人工智能助手,并且具有出色的论文写作能力。它能够根据用户提供的题目或要求,自动生成高质量的论文。 不论是论文、毕业论文、散文、科普文章、新闻稿件&am…