react 中使用echarts

文章目录

- 前言
- 1. 项目准备阶段
- 2. 安装 Echarts 库
- 3. 创建 React 组件并引入 Echarts
- 4. 构建组件结构及图表容器
- 5. 初始化与配置 Echarts 图表
- 6. 完整组件代码示例及使用说明
- 7. 动态更新图表数据

前言

之前项目中图表一直使用的是 ant design echarts ,但是由于 antV 的图表不兼容 CSS transform: 'scale' 缩放属性;项目是通过 scale缩放实现不同比例适配, scale 属性会导致图表的图例等焦点位置错误;转而使用 echarts;

以下是在 React 中使用 Echarts 的详细步骤及示例代码，方便后续使用

1. 项目准备阶段

首先确保你的 React 项目已经搭建好，若还未搭建，可以通过 create-react-app,vite 等工具创建一个基础的 React 项目。

2. 安装 Echarts 库

打开项目根目录下的终端（命令行窗口），使用包管理工具来安装 Echarts。如果使用 npm，执行以下命令：

npm install echarts --save

若使用 yarn，则运行：

yarn add echarts

3. 创建 React 组件并引入 Echarts

在 React 项目的 src 目录下（通常是在这里创建组件，你也可以根据项目结构调整），新建一个组件文件，在这个文件中，按照如下方式引入必要的依赖：

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

这里引入了 React 相关的钩子函数（useEffect 和 useRef）用于处理组件的生命周期相关逻辑以及获取 DOM 元素引用，同时引入了 Echarts 库。

4. 构建组件结构及图表容器

在组件内部，编写组件的返回结构，创建用于放置 Echarts 图表的 DOM 容器，示例如下：

const EchartsDemo = () => {
    const chartRef = useRef(null);
    return (
        <div className="echarts-container">
            <div ref={chartRef} style={{ width: '100%', height: '400px' }} />
        </div>
    );
};

上述代码中，通过 useRef 创建了一个引用 chartRef，用于后续获取对应的 DOM 元素（即图表容器 div）。给这个 div 容器设置了宽度为 100% 和高度为 400px 的样式，方便图表展示，同时添加了一个外层 div 并设置了类名，方便后续添加更多样式或进行布局调整等操作。

5. 初始化与配置 Echarts 图表

使用 useEffect 钩子函数在组件挂载及相关依赖更新时进行图表的初始化和配置操作，代码如下：

useEffect(() => {
    const chartDom = chartRef.current;
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '示例图表',
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            type: 'category',
            data: ['苹果', '香蕉', '橙子', '葡萄', '西瓜'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [100, 200, 150, 80, 90],
            },
        ],
    };
    myChart.setOption(option);
    return () => {
        myChart.dispose();
    };
}, []);

代码解释

首先通过获取到之前创建的图表容器 DOM 元素。
接着使用方法，基于这个 DOM 元素初始化一个 Echarts 图表实例 myChart。
然后定义了 Echarts 图表的配置对象 option，这里配置了图表的标题（title）、提示框（tooltip）、X 轴（xAxis）、Y 轴（yAxis）以及数据系列（series）等常见属性。例如，xAxis 配置为类目轴，并设置了对应的类目数据（水果名称），yAxis 配置为数值轴，series 中定义了一个柱状图的数据系列，包含名称、类型以及具体的销量数据。
通过 (option) 将配置应用到图表实例上，使其按照设定的配置进行渲染展示。
在 useEffect 的返回函数中添加了 ()，这一步很关键，它确保在组件卸载时，能够正确销毁 Echarts 图表实例，避免出现内存泄漏等问题。

6. 完整组件代码示例及使用说明

以下是组件的完整代码示例：

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

const EchartsDemo = () => {
    const chartRef = useRef(null);

    useEffect(() => {
        const chartDom = chartRef.current;
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: '示例图表',
            },
            tooltip: {
                trigger: 'axis',
            },
            xAxis: {
                type: 'category',
                data: ['苹果', '香蕉', '橙子', '葡萄', '西瓜'],
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [100, 200, 150, 80, 90],
                },
            ],
        };
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, []);

    return (
        <div className="echarts-container">
            <div ref={chartRef} style={{ width: '100%', height: '400px' }} />
        </div>

    );
};

export default EchartsDemo;

使用方式：在其他的 React 组件或者页面中，像引入普通组件一样引入组件即可展示对应的 Echarts 图表，例如在文件中：

import React from 'react';
import EchartsDemo from './EchartsDemo';

const App = () => {
    return (
        <div className="app">
            <EchartsDemo />
        </div>

    );
};

export default App;

7. 动态更新图表数据

如果需要根据业务逻辑动态更新图表中的数据，比如从服务器获取到新数据后更新图表展示效果，可以按照以下方式修改组件代码：

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

const EchartsDemo = () => {
    const chartRef = useRef(null);
    const [data, setData] = useState([100, 200, 150, 80, 90]);

    useEffect(() => {
        const chartDom = chartRef.current;
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: '示例图表',
            },
            tooltip: {
                trigger: 'axis',
            },
            xAxis: {
                type: 'category',
                data: ['苹果', '香蕉', '橙子', '葡萄', '西瓜'],
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: data,
                },
            ],
        };
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, [data]);

    const updateData = () => {
        // 模拟获取新数据，这里简单改变一下数据
        const newData = data.map((item) => item + 10);
        setData(newData);
    };

    return (
        <div className="echarts-container">
            <div ref={chartRef} style={{ width: '100%', height: '400px' }} />
            <button onClick={updateData}>更新数据</button>
        </div>
    );
};

export default EchartsDemo;

解释：

新增了一个 useState 钩子来管理图表的数据，初始设置了一组示例数据。
在 useEffect 的依赖项中添加了 data，这样当 data 发生变化时，useEffect 内部代码会重新执行，重新设置 Echarts 的配置选项（将新数据应用到图表配置中）并更新图表展示。
定义了 updateData 方法，用于模拟获取新数据并更新 data 状态，点击对应的按钮时就会触发这个方法，进而实现图表数据的动态更新。

秒客网