当前位置：首页 > React

react如何用echarts

2026-01-15 08:59:24React

在React中使用ECharts

安装ECharts和React专用封装库：

npm install echarts echarts-for-react

基础使用示例

创建一个基础的柱状图组件：

import React from 'react';
import ReactECharts from 'echarts-for-react';

function BarChart() {
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }]
  };

  return <ReactECharts option={option} />;
}

处理动态数据

当数据变化时需要更新图表：

react如何用echarts

function DynamicChart({ data }) {
  const option = {
    series: [{
      type: 'pie',
      data: data
    }]
  };

  return <ReactECharts option={option} style={{ height: 400 }} />;
}

主题定制

使用ECharts提供的主题或自定义主题：

import { Theme } from 'echarts';

function ThemedChart() {
  const option = {
    /* 图表配置 */
  };

  return (
    <ReactECharts 
      option={option}
      theme="dark"
    />
  );
}

事件处理

添加图表事件监听：

react如何用echarts

function ChartWithEvents() {
  const onChartClick = (params) => {
    console.log('图表点击事件', params);
  };

  const onEvents = {
    click: onChartClick
  };

  return (
    <ReactECharts
      option={/* 图表配置 */}
      onEvents={onEvents}
    />
  );
}

响应式设计

确保图表适应容器大小变化：

function ResponsiveChart() {
  const [width, setWidth] = useState('100%');

  useEffect(() => {
    const handleResize = () => {
      setWidth(`${window.innerWidth * 0.8}px`);
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <ReactECharts
      option={/* 图表配置 */}
      style={{ width, height: '400px' }}
    />
  );
}

按需引入减小体积

仅导入需要的图表类型：

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer
]);

function CustomImportChart() {
  return (
    <ReactECharts
      option={/* 使用柱状图的配置 */}
      echarts={echarts}
    />
  );
}

以上示例展示了在React中集成ECharts的各种常见用法，包括基础图表渲染、动态数据处理、主题应用、事件绑定以及性能优化等方面。根据实际需求选择合适的实现方式，可以构建出功能丰富且性能优良的数据可视化组件。