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;

使用流程很简单:

  1. useRef 获取 DOM 挂载点
  2. 调用 echarts.init 创建实例
  3. 通过 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 可视化怎么办


4. 小结

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

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

相关推荐
骑自行车的码农3 小时前
React 合成事件的设计原理 3
react.js
liangshanbo12155 小时前
React 19 新特性:原生支持在组件中渲染 <meta> 与 <link>
前端·javascript·react.js
U.2 SSD6 小时前
ECharts 日历坐标示例
前端·javascript·echarts
光影少年1 天前
react生态
前端·react.js·前端框架
paopaokaka_luck1 天前
基于SpringBoot+Vue的志行交通法规在线模拟考试(AI问答、WebSocket即时通讯、Echarts图形化分析、随机测评)
vue.js·人工智能·spring boot·后端·websocket·echarts
ObjectX前端实验室2 天前
【react18原理探究实践】React Effect List 构建与 Commit 阶段详解
前端·react.js
ObjectX前端实验室2 天前
【react18原理探究实践】更新阶段 Render 与 Diff 算法详解
前端·react.js
ObjectX前端实验室2 天前
【react18原理探究实践】render阶段【首次挂载】
前端·react.js
ObjectX前端实验室2 天前
【react18原理探究实践】组件的 props 和 state 究竟是如何确定和存储的?
前端·react.js
明里人2 天前
React 状态库:Zustand 和 Jotai 怎么选?
前端·javascript·react.js