在 React 中创建 ECharts 图表

安装依赖项:

• 使用 npm 或 yarn 安装 echarts-for-react 和 echarts 库。这些库提供了在 React 应用中集成和使用 ECharts 所需的工具和组件。

npm install echarts-for-react echarts
# 或者
yarn add echarts-for-react echarts

1. • echarts-for-react 是 ECharts 官方提供的 React 组件库，使得在 React 中使用 ECharts 更加方便。

2. 创建 React 组件:

   • 在 React 中创建一个新的函数组件 BarChart。这个组件将负责渲染柱状图并管理 ECharts 实例的初始化和销毁。

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

const BarChart = () => {
    useEffect(() => {
        // 在 useEffect 中初始化 ECharts 实例
        const chart = echarts.init(document.getElementById('bar-chart'));
        const option = { /* 配置项和数据 */ };
        chart.setOption(option);

        // 组件销毁时清除图表
        return () => {
            chart.dispose();
        };
    }, []);

    return (
        <div id="bar-chart" style={{ width: '600px', height: '400px' }}>
            {/* 这里放置 ECharts 图表 */}
        </div>
    );
};

export default BarChart;

 

1. • useEffect Hook: 使用 useEffect Hook 来管理图表的初始化和销毁。这确保了在组件挂载时初始化图表，并在组件卸载时清除图表，避免内存泄漏和性能问题。

2. 使用 ReactEcharts 组件 (可选):

   • 如果你更倾向于使用 echarts-for-react 提供的 ReactEcharts 组件，可以将 ECharts 的配置项传递给该组件。

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

const BarChart = () => {
    const option = { /* 配置项和数据 */ };

    return (
        <ReactEcharts
            option={option}
            style={{ width: '600px', height: '400px' }}
            opts={{ renderer: 'svg' }} // 可选，指定渲染方式
        />
    );
};

export default BarChart;

 

1. • 在这种方法中，你可以直接在 ReactEcharts 组件中定义 ECharts 的配置项 (option)，并选择性地指定渲染方式 (opts 属性)。

通过这些步骤，你能够在 React 应用中轻松地集成和使用 ECharts，创建出美观且交互性强的图表组件。