当前位置: 首页 > news >正文

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

相关文章:

  • 电玩城游戏大厅计时软件怎么用,佳易王计时计费管理系统软件定时语音提醒操作教程
  • mineadmin 快速安装部署(docker环境)
  • Go Zero微服务个人探究之路(十六)回顾api服务和rpc服务的本质
  • Avalonia之ListBox模版设置
  • SpringBoot 过滤器和拦截器的区别
  • 【C语言】文件操作篇-----程序文件和数据文件,文件的打开和关闭,二进制文件和文本文件,fopen,fclose【图文详解】
  • 修复Jenkins fossa扫描的时候报错的问题
  • PostgreSQL数据优化——死元组清理
  • 前端框架的发展史可以追溯到早期的静态网页时代
  • 寄存器(内存访问)
  • 最短路 算法解析+例题
  • 关于tcp协议
  • 阿里云数据湖存储加速套件JindoData
  • 深度解析:cache的基本概念原理扫盲
  • 3月最新形势分析以及您个人指导结论优化:正式战斗状态的马上拉响
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • 2017-09-12 前端日报
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • Fundebug计费标准解释:事件数是如何定义的?
  • HashMap ConcurrentHashMap
  • JavaScript异步流程控制的前世今生
  • JS数组方法汇总
  • laravel with 查询列表限制条数
  • MQ框架的比较
  • node-sass 安装卡在 node scripts/install.js 解决办法
  • Python进阶细节
  • ReactNativeweexDeviceOne对比
  • Vue2 SSR 的优化之旅
  • zookeeper系列(七)实战分布式命名服务
  • 紧急通知:《观止-微软》请在经管柜购买!
  • 排序算法学习笔记
  • 前端面试之闭包
  • 如何使用 OAuth 2.0 将 LinkedIn 集成入 iOS 应用
  • 设计模式走一遍---观察者模式
  • 携程小程序初体验
  • NLPIR智能语义技术让大数据挖掘更简单
  • ​软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】​
  • # 飞书APP集成平台-数字化落地
  • # 服务治理中间件详解:Spring Cloud与Dubbo
  • #NOIP 2014# day.1 T3 飞扬的小鸟 bird
  • (20)目标检测算法之YOLOv5计算预选框、详解anchor计算
  • (2024.6.23)最新版MAVEN的安装和配置教程(超详细)
  • (C语言)球球大作战
  • (day 2)JavaScript学习笔记(基础之变量、常量和注释)
  • (react踩过的坑)antd 如何同时获取一个select 的value和 label值
  • (vue)el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)
  • (第三期)书生大模型实战营——InternVL(冷笑话大师)部署微调实践
  • (翻译)Quartz官方教程——第一课:Quartz入门
  • (附源码)SSM环卫人员管理平台 计算机毕设36412
  • (教学思路 C#之类三)方法参数类型(ref、out、parmas)
  • (十三)Maven插件解析运行机制
  • (四)opengl函数加载和错误处理
  • (译)2019年前端性能优化清单 — 下篇
  • (转)Linux NTP配置详解 (Network Time Protocol)
  • .NET Core跨平台微服务学习资源