解决echarts饼图---legend显示/隐藏饼图不重新计算的问题 利用 formatter 闭包捕获 this从 chart.getOption() 读取 legend 选中状态。1. 顶部加 const self thisinitChart() { const self this // ← 新增 this.chart echarts.init(this.$refs.pieChart) ...2. 替换 tooltip formatter// 原 formatter: function(params) { return strong params.name /strongbr/ 工时: params.value.toFixed(1) hbr/ 占比: 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 /strongbr/ 工时: params.value.toFixed(1) hbr/ 占比: 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 }效果图

相关新闻

最新新闻

原生JS手写轮播图(超详细保姆级教程)

原生JS手写轮播图(超详细保姆级教程)

轮播图是前端页面最常见的功能,官网 banner、商品推荐、活动图几乎随处可见。今天不使用任何插件,纯原生 HTML CSS JS 手写一套完整轮播图,包含:自动播放、左右箭头切换、底部小圆点、鼠标悬停暂停、无缝切换。 代码结构简单、注…

2026/7/19 0:56:18
JavaScript 常用字符串方法详解(附实战代码)

JavaScript 常用字符串方法详解(附实战代码)

前言 字符串是前端开发中最常处理的数据类型之一,展示文本、搜索匹配、分割内容、大小写转换等场景都离不开字符串方法。 今天结合实操示例,把日常高频使用的 JS 字符串 API 一次性讲清楚,每段代码附带运行效果说明,新手也能直接复…

2026/7/19 0:56:18
智能开发环境架构:AI 增强的本地开发体验设计

智能开发环境架构:AI 增强的本地开发体验设计

智能开发环境架构:AI 增强的本地开发体验设计 一、开发环境的隐性浪费:为什么传统本地开发流程存在大量机械操作 一个前端开发者的典型工作日包含大量机械操作:从需求文档中提取 API 接口定义、对照设计稿编写组件代码、根据错误堆栈搜索解决…

2026/7/19 0:56:18
AI 辅助前端性能瓶颈定位:从 Lighthouse 报告到代码级根因分析

AI 辅助前端性能瓶颈定位:从 Lighthouse 报告到代码级根因分析

AI 辅助前端性能瓶颈定位:从 Lighthouse 报告到代码级根因分析 一、Lighthouse 的定位天花板:为什么高分报告不等于高性能体验 Lighthouse 是前端性能审计的事实标准。它的评分体系覆盖了 FCP、LCP、TBT、CLS 等核心 Web 指标,为开发者提供了…

2026/7/19 0:56:18
OpenAI 卖起键盘了?Codex Micro 这 230 美元,买的是硬件还是未来工作流

OpenAI 卖起键盘了?Codex Micro 这 230 美元,买的是硬件还是未来工作流

一、凌晨三点,我盯着这个 12 键的键盘想了很久昨晚刷到 OpenAI 发布 Codex Micro 的消息——一个 12 键的机械键盘,卖 230 美元——我盯着屏幕至少看了十秒,脑子里只转了一个念头:这特么不是愚人节吧?一个做模型的公司…

2026/7/19 0:56:18
向量检索加速:ANN 索引选型和查询参数调优实战

向量检索加速:ANN 索引选型和查询参数调优实战

向量检索加速:ANN 索引选型和查询参数调优实战 基础设施不需要漂亮话。一个 100 万向量的知识库从"勉强能用"到"丝滑检索",差距不在算法,在工程参数的调优。 一、两个向量检索系统,性能差 20 倍 团队内两套知…

2026/7/19 0:51:17

月新闻