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

解决echarts饼图---legend显示/隐藏饼图不重新计算的问题

利用 formatter 闭包捕获 this,从 chart.getOption() 读取 legend 选中状态。

1. 顶部加 const self = this

initChart() { const self = this // ← 新增 this.chart = echarts.init(this.$refs.pieChart) ...

2. 替换 tooltip formatter

// 原 formatter: function(params) { return '<strong>' + params.name + '</strong><br/>' + '工时: ' + params.value.toFixed(1) + ' h<br/>' + '占比: ' + params.percent + '%' } // 新 formatter: function(params) { const option = self.chart.getOption() const selected = option.legend?.[0]?.selected ?? {} const allData = self.data const visible = allData.filter(d => selected[d.name] !== false) const total = visible.reduce((s, d) => s + (d.value || 0), 0) const pct = total ? (params.value / total * 100).toFixed(1) : '0.0' return '<strong>' + params.name + '</strong><br/>' + '工时: ' + params.value.toFixed(1) + ' h<br/>' + '占比: ' + pct + '%' }

3. 替换 label formatter(字符串 → 函数)

// 原 label: { show: true, formatter: '{b}\n{c} h ({d}%)', fontSize: 12, fontWeight: 500 } // 新 label: { show: true, formatter: function(params) { const option = self.chart.getOption() const selected = option.legend?.[0]?.selected ?? {} const allData = self.data const visible = allData.filter(d => selected[d.name] !== false) const total = visible.reduce((s, d) => s + (d.value || 0), 0) const pct = total ? (params.value / total * 100).toFixed(1) : '0.0' return params.name + '\n' + params.value.toFixed(1) + ' h (' + pct + '%)' }, fontSize: 12, fontWeight: 500 }

效果图

http://www.cnnetsun.cn/news/3498898.html

相关文章:

  • 如何让闲置屏幕变身优雅翻页时钟:FlipIt屏保完全指南
  • GPT-5.6 Sol上线数天即曝删库行为 OpenAI定性为“诚实错误”
  • 计算机毕业设计之网上书店管理系统
  • API集成能力在2026年项目管理中究竟有多重要?
  • 把极空间变成私有云后台:1Panel、AList和远程访问一次跑通
  • 【Bug已解决】False positive cybersecurity flag. 解决方案
  • AI Agent 入门(一):OpenClaw 与 Hermes(openclaw输出篇)
  • react native项目配置eslint+prettier
  • 储能电池就这么选性价比高I好用的电池回收信息对接平台
  • 【Coding生态】从代码托管到 AI 能力底座:与Coding一起共建 AI 研发生态
  • 嘉准专利柔性红尾套线缆:上万次往复折弯不断线,告别每周停机换线
  • 一种欠定盲源分离方法及其在模态识别中的应用附Matlab代码
  • 2026年科研检测行业 难溶样品卡尔费休辅助溶剂选择解析
  • 题解:洛谷 B4359 [GESP202506 三级] 分糖果
  • HarmonyOS ArkUI Marquee 跑马灯与 Gauge 仪表盘:公告滚动与数据展示
  • 【计算机毕业设计】本科生学习资源整合功能设计与实现
  • 【AI大模型微调】第 3 章 微调整体流程
  • 为什么你的团队还没启用Gemini会议助手?——来自Google Cloud认证架构师的3个致命认知盲区
  • 基于用户注册信息的关键词检测挑战赛「Datawhale AI 夏令营」
  • 【计算机毕业设计】农产品销售系统设计与实现
  • C++ 性能优化:移动语义、完美转发与返回值优化
  • Three.js WebGL 安全加固实战:Shader 来源验证、WebGL 扩展沙箱与纹理域名白名单
  • 灾备演练:切换 DR 站点后的全国 SpeedCE 点检
  • ImageGlass终极指南:跨平台免费开源图片查看器的完整解决方案
  • 又一个神级画图 Skill 开源,再见 draw.io!
  • 【AI专栏】图解深度学习-AI infra工程师必知必会 - 第 04 章:训练 vs 推理
  • 不同算力下 AI 视频生成效果对比:RTX4090 vs A100 实测差距有多大
  • 1. 专业冰场建设,哪些公司实力较强?全面解析冰场建设市场2. 专业冰场建设实力强的公司有哪些?冰场建设企业大盘点3.
  • 瑜伽馆管理系统有什么功能?约课系统哪家好?
  • 【Java基础】分支结构与循环语句 超详细笔记(零基础易懂)