React + ECharts 实践：构建可交互的数据可视化组件
React + ECharts 实践：构建可交互的数据可视化组件
在前端开发中，数据可视化是连接用户与数据的桥梁。一个优秀的图表组件不仅要美观，更要具备良好的交互性和响应性。本文将记录我在实习期间，基于 React 和 ECharts 封装一系列可复用图表组件的实践与思考。
整理一下最近做的图表组件吧
冶炼折线图：通过左侧菜单切换不同指标，点击图例可筛选显示的数据系列。
柱状图：通过顶部菜单切换不同数据维度，展示对比数据。
数据折线图：根据外部选中的数据和事件，动态更新图表内容。
虽然图表类型和交互不同，但它们在技术实现上有很多共通之处，比如图表的生命周期管理、主题配置、数据更新机制等。因此，我的思路是先搭建一个通用的图表容器，再针对不同需求进行定制。
<div className={styles.chartContainer}><div ref={chartRef} className={styles.chart}></div></div>
1、图表组件的骨架：初始化与生命周期管理
在 React 中使用 ECharts，关键在于处理好组件的生命周期，确保图表实例在正确的时机被创建、更新和销毁。
（1）图表实例的初始化
我们使用 useRef 来存储 ECharts 实例，避免因组件重渲染而导致实例丢失。初始化操作放在 useEffect 中，确保 DOM 已经渲染完成。
// 使用 useRef 存储 ECharts 实例
const chartInstance = useRef<echarts.ECharts | null>(null);
const chartRef = useRef<HTMLDivElement>(null);
// 初始化图表实例
useEffect(() => {
if (chartRef.current && !chartInstance.current) {
chartInstance.current = echarts.init(chartRef.current);
}
// 组件卸载时，销毁实例，防止内存泄漏
return () => {
chartInstance.current?.dispose();
};
}, []);
（2）响应式处理：监听窗口变化
为了让图表能够自适应容器大小，监听 resize 事件是必不可少的。
// 窗口大小变化处理useEffect(() => {const handleResize = () => {chartInstance.current?.resize();};window.addEventListener('resize', handleResize);return () => {window.removeEventListener('resize', handleResize);chartInstance.current?.dispose();};}, []);
2、数据驱动：动态渲染与交互
图表的灵魂在于数据。当数据或配置项（option）发生变化时，我们需要调用 setOption 方法来重新渲染图表。
useEffect(() => {
if (chartInstance.current) {
const renderChart = () => {
// 使用 setOption 更新图表
chartInstance.current?.setOption(option, true);
// 监听图例点击事件（可选）
chartInstance.current?.off('legendselectchanged'); // 先解绑，防止重复绑定
chartInstance.current?.on('legendselectchanged', (params: any) => {
if (params && [params.name](http://params.name/)) {
setActiveLegend([params.name](http://params.name/)); // 更新 state，触发其他联动
}
});
};
renderChart();
}
}, [option]); // 当 option 变化时，重新渲染
3、视觉定制：渐变色与动画
为了让图表更符合业务系统的视觉风格，我们对颜色和动画进行了深度定制。
（1）动态渐变色：ECharts 支持线性渐变，我们可以为不同的数据系列（series）设置不同的颜色。
const series = legendData.map((legendName) => {
// ... 数据处理逻辑
return {
name: legendName,
type: 'bar',
data: seriesData,
itemStyle: {
// 核心代码：创建渐变色
color: () => {
const createGradient = (color1: string, color2: string) => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: color1 },
{ offset: 1, color: color2 }
]);
};
if (legendName === '系列一') {
return createGradient('#6AC5F7', '#2CB3FF');
} else if (legendName === '系列二') {
return createGradient('#EAFFE2', '#2FFF92');
}
// ... 更多系列
return '#83BCFF'; // 默认颜色
}
}
};
});
（2）流畅的动画：合理的动画能提升用户体验。我们可以在 option 的顶层配置全局动画效果。
const option = {
// ...
animation: true,
animationDuration: 1000, // 初始动画时长
animationEasing: 'elasticOut', // 动画缓动效果
animationDelay: function (idx: number) {
return idx * 50; // 系列动画延迟
},
// ...
};
4、智能坐标轴：动态 Y 轴与格式化
在业务场景中，数据的量级和单位可能会变化。一个固定的 Y 轴显然无法满足需求。我们实现了根据数据动态计算 Y 轴范围和标签格式的功能。
yAxis: {
type: 'value',
min: 0,
// 动态计算最大值
max: function () {
let maxValue = 0;
// 遍历所有数据找到最大值
oreData.data.forEach(item => {
legendData.forEach(legendName => {
const value = item[legendName]?.[dataKey] || 0;
maxValue = Math.max(maxValue, value);
});
});
// 根据数据类型应用不同的余量策略
if (dataKey.includes('品位')) {
return maxValue * 1.2;
} else {
return maxValue > 90 ? 100 : maxValue * 1.1;
}
},
axisLabel: {
// 动态格式化标签
formatter: function (value: number) {
if (dataKey.includes('品位')) {
return ${value.toFixed(3)}; // 品位显示3位小数
} else {
return ${value.toFixed(0)}; // 其他显示整数
}
}
}
}
相关代码：https://github.com/xixloveixixi/weidaComponent