箭头函数在图表数据转换中主要用于简洁处理数组映射、过滤和格式化，如将原始对象数组转为图表库所需结构、动态计算百分比、多条件筛选排序等，但需注意this绑定限制及返回对象时的括号语法。
箭头函数在图表数据转换中主要用来简洁地处理数组映射、过滤和格式化，尤其适合把原始数据（比如后端返回的 API 结果）快速转成图表库（如 ECharts、Chart.js、ApexCharts）所需的结构。
把原始对象数组转成 series 数据
很多图表需要 series 是形如 [{name: 'A', value: 12}, {name: 'B', value: 34}] 的结构，而原始数据可能是 [{id: 1, title: 'A', count: 12}, ...]。用箭头函数配合 map() 一行就能搞定：
const rawData = [{id: 1, title: '苹果', count: 25}, {id: 2, title: '香蕉', count: 18}];
const seriesData = rawData.map(item => ({ name: item.title, value: item.count }));
// → [{name: '苹果', value: 25}, {name: '香蕉', value: 18}]
动态计算并添加字段（比如百分比或增长率）
做饼图或带标注的柱状图时，常需基于原始值算新字段。箭头函数配合解构让逻辑清晰又紧凑：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const total = rawData.reduce((sum, item) => sum + item.count, 0);
const withPercent = rawData.map(({ title, count }) => ({
name: title,
value: count,
percent: ((count / total) * 100).toFixed(1) + '%'
}));
过滤 + 转换，适配多条件图表需求
比如只展示销量 > 10 的品类，并按名称排序后再转结构：
const chartReady = rawData
.filter(item => item.count > 10)
.sort((a, b) => b.count - a.count)
.map(({ title, count }) => [title, count]); // Chart.js 横向柱状图常用 [label, value] 形式
注意 this 和参数简写的边界
箭头函数没有自己的 this，在图表回调中要小心——比如 ECharts 的 tooltip.formatter 若依赖组件实例方法，就不能直接写箭头函数。但纯数据转换场景几乎无此问题。另外，单参数可省括号，无参数必须写 ()，返回对象字面量记得加小括号避免语法错误：
-
item => item.name✅（单参数，简洁） -
() => []✅（无参数） -
item => { name: item.name }❌（会被当成代码块，返回 undefined） -
item => ({ name: item.name })✅（加括号才是返回对象）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
