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

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

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

相关文章

打造你的HTML5打地鼠游戏:零基础入门教程

🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 &#x…

Rust生命周期和生命周期声明‘作用Missing lifetime specifier

Missing lifetime specifier:报错说明缺失声明周期声明 Rust 生命周期机制是与所有权机制同等重要的资源管理机制。 之所以引入这个概念主要是应对复杂类型系统中资源管理的问题。 引用是对待复杂类型时必不可少的机制,毕竟复杂类型的数据不能被处理器…

UDP连接树莓派时提高连接速度,降低卡顿感

背景 树莓派4B刷的是ubuntu20.4系统,使用win10自带的远程桌面连接和其连接,卡的一批,于是探索并记录下如何降低连接卡顿感 步骤一 点击显示选项, 降低显示配置和颜色深度: 步骤二 我的树莓派是通过电脑移动热点的方式…

Qt+FFmpeg+opengl从零制作视频播放器-13.打包为exe包发布软件

1.首先visual studio给生成程序添加桌面图标。 右键工程,添加新文件资源文件Resource.rc 选择导入文件,我这里导入了Player.ico文件。 添加后,在资源文件那里就可以看见ico文件。 然后编译release程序, 生成的可执行程序就带上了图标。 2.使用Qt 程序打包发布-windeployq…

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

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

uniapp图片涂鸦插件(支持多种涂鸦方式,图片放大缩小)

工程地址https://gitee.com/geshijia/ct-graffiti ct-graffiti涂鸦组件使用说明 参考说明 参考链接:https://github.com/ylyuanlu/yl-graffiti 感谢作者的付出,给我提供了一些思路,并做了如下优化: 增加图片放大缩小移动功能添…

第十四届蓝桥杯蜗牛

蜗牛 线性dp 目录 蜗牛 线性dp 先求到达竹竿底部的状态转移方程 求蜗牛到达第i根竹竿的传送门入口的最短时间​编辑 题目链接:蓝桥杯2023年第十四届省赛真题-蜗牛 - C语言网 关键在于建立数组将竹竿上的每个状态量表示出来,并分析出状态转移方程 in…

[实战]API防护破解之签名验签

前言: 传统的接口在传输的过程中,是非常容易被抓包进行篡改,从而进行中间人攻击。这时候我们可以通过对参数进行签名验证,如果参数与签名值不匹配,则请求不通过,直接返回错误信息,从而防止黑客…

混合A*源码解读(c++)

基于ros中通过slam建立的栅格地图&#xff0c;使用混合A*进行路径规划。 首先是run_hybrid_astar.cpp: #include "hybrid_a_star/hybrid_a_star_flow.h" #include "3rd/backward.hpp" #include <ros/ros.h>namespace backward { backward::SignalHa…

带钢切割控制液压比例阀放大器

比例阀控制器放大器放大板技术是电液比例控制系统中的重要组成部分&#xff0c;它负责对比例阀进行精确控制&#xff0c;以实现对液压系统中流量、压力等参数的精细调节。可以实现对液压流量或压力的精确控制&#xff0c;从而使系统以更高的精度和更快的响应速度执行各种操作。…

以102flowers数据集为例训练ResNet50模型

以102flowers数据集为例训练ResNet50模型 使用飞桨高阶API&#xff0c;使用最少的代码量&#xff0c;实现在102flowers数据集训练ResNet50模型。同时可以一条命令修改成Mnist、Cifar10、Cifar100等数据集&#xff0c;换成其它模型也是只需要一句话代码。 数据集介绍 102flowe…

Zoho Mail有微信小程序啦!从微信就能直接收发邮件

Zoho Mail有微信小程序啦&#xff01;从微信就能直接收发邮件。可实现&#xff1a;从微信直接查看邮件、撰写新邮件、回复邮件。对于那些想从手机访问Zoho Mail企业邮箱来收发邮件&#xff0c;但又不想下载Zoho Mail 的手机app来占用手机存储的用户来说&#xff0c;微信小程序实…

Celery知识

celery介绍 # celery 的概念&#xff1a; * 翻译过来是芹菜 * 官网&#xff1a;https://docs.celeryq.dev/en/stable/ # 是分布式的异步任务框架&#xff1a; 分布式&#xff1a;一个任务&#xff0c;拆成多个任务在不同机器上做 异步任务&#xff1a;后台执行…

【开源】SpringBoot框架开发软件学院思政案例库系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统管理员2.2 普通教师 三、系统展示四、核心代码4.1 查询思政案例4.2 审核思政案例4.3 查询思政课程4.4 思政案例点赞4.5 新增思政案例评语 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的软件学…

Mysql8.0.30数据data目录文件解释

数据库内存和磁盘架构 data目录展示 [rootDESKTOP-9ADRUGP data]# pwd /usr/local/software/mysql/3312/data [rootDESKTOP-9ADRUGP data]# ls -l total 96616 -rw-r----- 1 systemd-coredump input 56 Jul 24 2023 auto.cnf -rw-r----- 1 systemd-coredump input 30…

数据库基础理论知识

1.基本概念 数据(Data)&#xff1a;数据库存储的基本对象。数字、字符串、图形、图像、音频、视频等数据库(DB)&#xff1a;在计算机内&#xff0c;永久存储、有组织、可共享的数据集合数据库管理系统(DBMS)&#xff1a;管理数据库的系统软件数据库系统(DBS)&#xff1a;DBDBM…

浏览器的工作原理

从输入一个url到页面加载完成&#xff0c;中间都发生了什么&#xff1f; 参考原文地址 首先在浏览器地址栏输入一个地址并回车之后&#xff0c; 1. DNS查找 浏览器会进行DNS查找&#xff0c;把域名https://example.com转化为真实的IP地址10.29.33.xx&#xff0c;根据IP地址找…

linux驱动——中断

1.Cortex-A系列的中断的简介 中断的基本概念&#xff1a;(interrupt) 中断本质上是系统内部的异常机制,当中断产生之后&#xff0c;他会停下当前正在执行的任务&#xff0c;转而去做其他的事情,在停下当前正在执行的任务之前,要先入栈&#xff08;保护现场,其他的事情做完之后…

Mysql/Redis缓存一致性

如何保证MySQL和Redis的缓存一致。从理论到实战。总结6种来感受一下。 理论知识 不好的方案 1.先写MySQL&#xff0c;再写Redis 图解说明: 这是一幅时序图&#xff0c;描述请求的先后调用顺序&#xff1b; 黄色的线是请求A&#xff0c;黑色的线是请求B&#xff1b; 黄色的…

TYPE C模拟耳机POP音产生缘由

关于耳机插拔的POP音问题&#xff0c;小白在之前的文章中讲述过关于3.5mm耳机的POP音产生原因。其实这类插拔问题的POP音不仅仅存在于3.5mm耳机&#xff0c;就连现在主流的Type C模拟耳机的插拔也存在此问题&#xff0c;今天小白就来讲一讲这类耳机产生POP音的缘由。 耳机左右…