ECharts饼图图例消失踩的坑

在使用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就可以显示了。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux内核编译(版本6.0以及版本v0.01)并用qemu驱动

系统环境: ubuntu-22.04.1-desktop-amd64 目标平台: x86 i386 内核版本: linux-6.0.1 linux-0.0.1 环境配置 修改root密码 sudo passwd 修改软件源(非必要) vmtools安装(实现win-linux软件互传) 安装一些必须的软件&…

代码随想录算法训练营第25天|216.组和总和三、17.电话号码的字母组合

目录 一、力扣216.组合总和三1.1 题目1.2 思路1.3 代码 二、力扣17.电话号码的字母组合2.1 题目2.2 思路2.3 代码 一、力扣216.组合总和三 1.1 题目 1.2 思路 自己的想法:和总和问题思路类似,回溯法。 (1)k个数的组合&#xff0…

如何查看mnist数据集的图片

import numpy as np import matplotlib.pyplot as pltdef read_mnist_images(filename):with open(filename, rb) as f:# 读取魔术数字、图像数量、行数、列数magic_number int.from_bytes(f.read(4), big)number_of_images int.from_bytes(f.read(4), big)rows int.from_by…

《详解:鸿蒙NEXT开发核心技术》

我们现在都知道鸿蒙作为一个国产的全栈自研系统,经过国家主推后。已经引起人们很大的关注,其中作为开发者来说;许多一线大厂已经与其华为鸿蒙展开原生应用的合作了,目前了解到已经有200家。而之后出现了很多的高薪鸿蒙开发岗位&am…

ThreeJs 射线拾取不准确设置

欢迎关注进来点个关注; 关注获取更多咨询!关注获取答案! 1、效果图如下: 2、问题描述:点击一开始无法获取当前的位置,官方推荐直接使用 mouseClick.x = (event.offsetX / window.innderWidth) * 2 - 1; mouseClick.y = -(event.offsetY / window.innderHeight) * 2 + 1;…

独显直连是什么意思

很多小伙伴在购买笔记本电脑时,尤其是游戏本,都会看到详情页在介绍显卡提示有“独显直连”功能,那么独显直连是什么意思?它又有什么用呢? 独显直连是什么意思 独显直连,英文全称Graphics Processing Unit…

【你也能从零基础学会网站开发】Web建站之javascript入门篇 History对象与Location对象

🚀 个人主页 极客小俊 ✍🏻 作者简介:程序猿、设计师、技术分享 🐋 希望大家多多支持, 我们一起学习和进步! 🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注 History历史对…

Linux本地搭建FastDFS系统

文章目录 前言1. 本地搭建FastDFS文件系统1.1 环境安装1.2 安装libfastcommon1.3 安装FastDFS1.4 配置Tracker1.5 配置Storage1.6 测试上传下载1.7 与Nginx整合1.8 安装Nginx1.9 配置Nginx 2. 局域网测试访问FastDFS3. 安装cpolar内网穿透4. 配置公网访问地址5. 固定公网地址5.…

(BAT向)Java岗常问高频面试汇总:MyBatis 微服务 Spring 分布式 MySQL等

看面试题可以是为了面试,也可以是对自己学到的东西的一种查漏补缺,更加深刻的去了解一些核心知识点 Spring面试高频问题 问题一:谈 需要zi料 绿色徽【vip1024b】 谈你对spring IOC 和 DI 的理解,它们有什么区别? **问题…

spring-boot-maven-plugin springboot打包配置问题

目录 一、打包可执行jar 二、打包非可执行jar 三、两种jar对比 springboot项目的pom文件中一般都配置了spring-boot-maven-plugin打包插件。 <!-- 打包插件依赖 --><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-b…

爆肝整理万能sass框架:react18+webpack5+typescript+ant Design,框架在手,交付无忧!!!

来活了&#xff0c;要求一周时间内快速给xxx业务开发一个sass系统平台&#xff0c;要求有角色权限控制&#xff0c;推荐模块&#xff0c;各种业务内容模块&#xff0c;莫慌&#xff0c;直接上代码&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 1.系统框架配置…

前端去除网页水印

按F12&#xff0c;打开开发者工具面板&#xff0c;然后直接在样式搜索backgroud 然后直接取消backgroud 的复选框即可。

基于Springboot的面向智慧教育的实习实践系统设计与实现(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的面向智慧教育的实习实践系统设计与实现&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&…

6.Java并发编程—深入剖析Java Executors:探索创建线程的5种神奇方式

Executors快速创建线程池的方法 Java通过Executors 工厂提供了5种创建线程池的方法&#xff0c;具体方法如下 方法名描述newSingleThreadExecutor()创建一个单线程的线程池&#xff0c;该线程池中只有一个工作线程。所有任务按照提交的顺序依次执行&#xff0c;保证任务的顺序性…

AWS入门实践-AWS CLI工具的使用介绍

AWS CLI&#xff08;Amazon Web Services Command Line Interface&#xff09;是一个强大的工具&#xff0c;它允许您直接从命令行与AWS服务进行交互。这不仅可以加快许多任务的处理速度&#xff0c;而且还可以通过脚本自动化。 一、AWS CLI工具的安装 1、Windows 安装下载…

【PLIO学习总结】laserMapping中的时间戳与状态更新逻辑

本文仅用于个人学习总结记录。如有错误&#xff0c;请批评指正。 0、PLIO简要思路 从PLIO的论文中&#xff0c;可以知道&#xff0c;完整的PLIO算法采用IMU和LiDAR数据同时作为“输入”&#xff0c;维护状态变量包括加速度和角速度。 同时&#xff0c;PLIO是一种distortion-…

手搭手RocketMQ发送消息

消息中间件的对比 消息中间件 ActiveMQ RabbitMQ RocketMQ kafka 开发语言 java erlang java scala 单击吞吐量 万级 万级 10万级 10万级 时效性 ms us ms ms 可用性 高(主从架构) 高(主从架构) 非常高(主从架构) 非常高(主从架构) 消息中间件: acti…

flutter入门

本文真对 Flutter 的技术特性&#xff0c;做了一些略全面的入门级的介绍&#xff0c;如果你听说过Flutter&#xff0c;想去了解它&#xff0c;但是又不想去翻厚厚的API&#xff0c;那么本文就是为你准备的。 随着纯客户端到Hybrid技术&#xff0c;到RN&Weex&#xff0c;再…

Vue2(五):收集表单数据、过滤器、内置指令和自定义指令

一、回顾 总结Vue监视数据 1.Vue监视数据的原理&#xff1a; 1.vue会监视data中所有层次的数据。 2.如何监测对象中的数据?通过setter实现监视&#xff0c;且要在new Vue时就传入要监测的数据。(1&#xff09;.对象中后追加的属性&#xff0c;Vue默认不做响应式处理(2&#…

苍穹外卖学习-----2024/03/010---redis,店铺营业状态设置

1.Redis入门 2.在Java中操作Redis 3.店铺营业状态设置 BUG!!! 今天在启动项目时&#xff0c;用到了Redis缓存数据库&#xff0c;但是却出现了报错信息&#xff1a; ERR Client sent AUTH, but no password is set。Caused by: io.lettuce.core.RedisCommandExecutionException…