React + ECharts 数据可视化实战与面试要点

在前端项目里，数据可视化几乎是标配功能。无论是老板看财报，还是产品看用户数据，直观的图表总比一堆数字更有说服力。最近在用 React + ECharts 做可视化的时候，顺便整理了一些实用经验和面试可能会问到的知识点，分享出来给大家。

1. ECharts 简介

ECharts 是百度开源的一个 JavaScript 图表库，可以轻松绘制各种图表：

柱状图（bar）
饼状图（pie）
折线图（line）
地图（map）
雷达图（radar）
......

它的特点是：

功能丰富，交互效果好
对大数据量的渲染支持不错
配置项灵活，学习成本不高
和 React、Vue 等前端框架结合方便

2. 在 React + TypeScript 中使用 ECharts

安装依赖

css 复制代码

npm install echarts
npm install --save-dev @types/echarts

React 本身是 TypeScript 写的，所以类型声明已经内置；

ECharts 是 JavaScript 写的，类型声明需要单独安装。

渲染一个简单的饼状图

jsx 复制代码

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const Demo: React.FC = () => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current) {
      const myChart = echarts.init(chartRef.current);

      const option = {
        title: {
          text: '姚大公司财报'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        series: [
          {
            name: '销量',
            type: 'pie',
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' },
            ]
          }
        ]
      };

      myChart.setOption(option);
    }
  }, []);

  return <div ref={chartRef} style={{ width: '600px', height: '400px' }} />;
};

export default Demo;

使用流程很简单：

用 useRef 获取 DOM 挂载点
调用 echarts.init 创建实例
通过 setOption 设置图表数据和样式

3. 面试中可能会问到的点

很多公司会在可视化相关岗位问到 ECharts，这里整理一些高频问题：

1）ECharts 和其他图表库的区别

ECharts：功能强大，支持交互，适合国内项目
Chart.js：轻量，配置简单，功能没那么全面
D3.js：底层库，自由度高，但学习成本也高

2）如何避免 React 中的重复渲染

图表实例最好只在初次渲染时创建一次
数据更新时用 setOption 改配置，不要重新 init

3）TypeScript 的类型约束

为什么要写成 useRef<HTMLDivElement>(null)？

如果不加类型，chartRef.current 默认是 null，无法直接当成 DOM 节点用
加上 <HTMLDivElement> 之后，TS 能正确推断类型，传给 echarts.init 才不会报错

4）性能优化怎么做

按需引入 ECharts 模块，减少打包体积
只在数据变化时更新图表，避免无效渲染
窗口缩放时给 chart.resize() 加防抖或节流

5）想做 3D 可视化怎么办

ECharts 本身主要是 2D 图表
3D 场景可以用 ECharts GL 或 three.js

4. 小结

ECharts 用起来不复杂，尤其是结合 React 和 TypeScript，开发体验还不错。

面试中除了会问"怎么用"，还可能会涉及 类型约束、性能优化、库的对比 等方面，这些才是能让你在回答里加分的地方。