当前位置：首页 > React

react实现echarts

2026-01-26 14:51:33React

在 React 中实现 ECharts

安装 ECharts 和 React 封装库

npm install echarts echarts-for-react

基础使用示例

创建一个简单的折线图组件

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

function LineChart() {
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line'
    }]
  };

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

export default LineChart;

响应式处理

添加窗口大小变化的监听

react实现echarts

import React, { useEffect, useRef } from 'react';
import ReactECharts from 'echarts-for-react';

function ResponsiveChart() {
  const chartRef = useRef(null);

  const option = {
    // 图表配置
  };

  useEffect(() => {
    const handleResize = () => {
      if (chartRef.current) {
        chartRef.current.getEchartsInstance().resize();
      }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

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

主题定制

使用自定义主题

import * as echarts from 'echarts';
import ReactECharts from 'echarts-for-react';

function ThemedChart() {
  // 注册主题
  echarts.registerTheme('my_theme', {
    backgroundColor: '#f4cccc',
    // 其他主题配置
  });

  return (
    <ReactECharts 
      option={option} 
      theme="my_theme" 
      style={{ height: 400 }}
    />
  );
}

事件处理

添加图表事件监听

react实现echarts

function ChartWithEvents() {
  const onEvents = {
    click: (params) => {
      console.log('Chart clicked', params);
    },
    legendselectchanged: (params) => {
      console.log('Legend selected', params);
    }
  };

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

动态数据更新

使用 useEffect 更新数据

function DynamicChart({ data }) {
  const [option, setOption] = useState(baseOption);

  useEffect(() => {
    setOption(prev => ({
      ...prev,
      series: [{ ...prev.series[0], data }]
    }));
  }, [data]);

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

性能优化

对于大数据量图表使用懒加载

function LazyLoadChart() {
  const [loaded, setLoaded] = useState(false);

  return (
    <div onMouseEnter={() => setLoaded(true)}>
      {loaded && <ReactECharts option={largeDataOption} />}
      {!loaded && <div>Hover to load chart</div>}
    </div>
  );
}