在React当中如何用Echarts做可视化图表

哈喽哈喽，我就是风靡全世界的男人-小帅。基本每部电影都有我的身影。咳咳，但是今天呢，主角不是小帅我，而是Echarts。事情是这样的，小帅我不是实习嘛，维护后台管理的项目，小帅的mentor教给我一个任务，在后台管理当中加一个折现统计图，这让小帅有点为难，因为小帅原来没做过相关的需求，但是我看到项目当中有用到Echarts，嘿嘿，主角这不就登场了嘛，那我们今天就用Echats做图标可视化。你说小帅不是主角了，不不不，会用echarts的小帅更帅。

Echarts

我们先看到echarts的官网，一打开就是一个会动的扇形统计图哦。可是呢，它的功能十分的强大的，可不只是扇形统计图哦，想象一下我们在哪里看过这种可视化的图表。我们看一下官方的示例。

各种各样的可视化图表，在我们生活的方方面面都用的到，比如气温图，股票走向的趋势，甚至连北京的交通路线都有。

咱就是说，这么帅的组件库，你不想掌握嘛。什么？不会用？小帅教你，小帅手把手教你，不要害羞，虽然小帅很帅。

如何在react使用Echarts

把大象装冰箱需要几步？两步，打开冰箱，把大象装进去。

在react中用echarts需要进步，同样也是两步。给一个容器，把echarts装进去。 但是首先我们得获取一个echarts实例。

• npm安装echarts

npm install echarts --save

• 在项目中引入echarts 跟很多组件库都是一样的啦。官方提供了全局引入和按需引入。现在基本都用脚手架，会帮我们在打包的时候自动的处理掉没有引入的模块，所以这里我用的就是全局引入。

刚才我们说用echarts要几步，就两步，准备好容器，把它塞进去，让我们写一个组件吧。 在src下建立一个components文件夹，再建一个lineChrats.jsx文件。然后下面就是我们的这个组件了。

import { useEffect, useRef } from "react";
import * as echarts from "echarts";

const LineCharts = () => {
    //获取组件的dom元素
    const chartRef = useRef(null);
    useEffect(() => {
        //创建echarts实例
        let chartInstance = echarts.init(chartRef.current);
        //配置数据
        let option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
                textStyle: {
                    color: "#fff",
                    align: "left",
                    fontSize: 14,
                },
                backgroundColor: "rgba(0,0,0,0.8)",
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                },
                {
                    data: [900, 700, 800, 900, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }
            ]
        };

        //将配置的数据导入到实例中
        chartInstance.setOption(option);
    })
    return <div style={{ alignItems: "center" }}>
        <div ref={chartRef} style={{ height: "400px" }}>
        </div>
    </div>
}

export default LineCharts;

怎么理解呢？首先我们需要一个容器。用useRef标记一个容器，获取dom元素。这个就是塞echarts实例的容器啦。然后在容器创建完之后，我们塞echarts，也就是初始化一个echarts实例，后续就是操作这个实例了。然后定义一个配置项，用echarts实例的setOption方法把数据配置导进去，嗯，没错，就这样完成了。

然后就可以把我们的组件放进App.jsx中使用啦。option里面的数据可以自己配置哦，配置数据不一样，出现的结果就不一样，可能是折线图，可能是柱状图，反正呀，echarts的形状就取决于你的option配置项了。让我们看看效果。

一个折现图就这么水灵灵的出现了。

封装通用型的组件

你看哦，既然每个echarts都是option配置项不同，那么我们可以从父组件传值过值，传不一样的值，就有不一样的echrats图表。那我们再写一个publicCharts组件吧。其实也是一样的，及时option值通过父组件props传过去。

import { useEffect, useRef } from "react"
import * as echarts from "echarts"


const PublicCharts = ({
    optionData
}) => {
    // 渲染实例函数
    const chartRef = useRef(null);
    let chartInstance = null;
    function renderChart() {
        try {
            // `echarts.getInstanceByDom` 可以从已经渲染成功的图表中获取实例，其目的就是在 options 发生改变的时候，不需要
            // 重新创建图表，而是复用该图表实例，提升性能，因为所有的图表不一样的就只是option数据。
            const renderedInstance = echarts.getInstanceByDom(chartRef.current);
            if (renderedInstance) {
                chartInstance = renderedInstance;
            } else {
                chartInstance = echarts.init(chartRef.current);
            }
            chartInstance.setOption(optionData);
        } catch (error) {
            console.error("error", error.message);
            chartInstance && chartInstance.dispose();
        }
    }

    useEffect(() => {
        //在组件初始化已经获取到数据的时候渲染图表
        renderChart();

        return () => {
            // 销毁图表实例，释放内存
            chartInstance && chartInstance.dispose();
        };
    }, [])

    // 定义窗口大小发生改变执行的回调函数
    function resizeHandler() {
        chartInstance.resize();
    }

    useEffect(() => {
        window.addEventListener("resize", resizeHandler);

        // 组件销毁时移除监听事件
        return () => {
            window.removeEventListener("resize", resizeHandler);
        }
    })


    return (
        <div>
            <h2>publicCharts</h2>
            <div
                ref={chartRef}
                style={{ height: "400px" }}
            >
            </div>
        </div>

    )
}

export default PublicCharts

然后父组件传一个props

这样我们的组件也就封装好啦，加上了一点性能的考虑，比如用同一个实例，采用单例模式。监听屏幕的变化调用echarts实例的resize()方法。 还是一样的，用echats就两步，给个容器塞进去，就是中间曲折一点。

npm库 echarts-for-react

我们在把echarts塞进容器的时候，是不是得实例化一个echarts，也就是得到echarts，而npm库中得echarts-for-react可以帮我们把获得echarts这一步都省略了，十分方便，在写业务的时候可以用到。

• 安装

npm install --save echarts
npm install --save echarts-for-react

首先我们先安装echarts 和save echarts-for-react 在创建一个reactCharts.jsx组件

import { useCallback } from 'react'
import * as echarts from 'echarts'
import ReactEcharts from 'echarts-for-react'

const ReactLineCharts = ({
    options
}) => {

    const onChartReadyCallback = useCallback((echarts) => {
        console.log('ready')
    }, [])
    return <div>
        <h2>ReactEcharts</h2>
        <ReactEcharts
            echarts={echarts}
            option={options}
            notMerge={true}
            onChartReady={onChartReadyCallback}
            style={{ height: 400, width: 600 }}
        />
    </div>
}

export default ReactLineCharts

在组件中引入ReactEcharts组件，直接用，传option值就可以了，它会帮我们把初始化echarts和设置option等工作完成，只要正确的写好它的属性。我们就可以把我们写的组件放在App.jsx中直接用了。

文件路径

• App.jsx

import './App.css';
import React from 'react';
import LineCharts from './components/lineCharts';
import ReactLineCharts from './components/reactCharts';
import PublicCharts from './components/publicCharts';
function App() {
  const data = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      textStyle: {
        color: "#fff",
        align: "left",
        fontSize: 14,
      },
      backgroundColor: "rgba(0,0,0,0.8)",
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      },
      {
        data: [900, 700, 800, 900, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };
  return (
    <div className="App">
      echarts图形可视化
      <div style={{ width: 600, height: 400, background: "pink", margin: "20px auto" }}>
        <LineCharts />
      </div>
      <div style={{ width: 600, height: 400, margin: "20px auto" }}>
        <ReactLineCharts options={data} />
      </div>
      <div style={{ width: 600, height: 400, margin: "20px auto" }}>
        <PublicCharts optionData={data} />
      </div>
    </div>
  );
}

export default App;

总结

echarts是一个很强大的图表库，里面有很多的炫酷的功能。但是使用它只需要两步。准备一个容器，也就是获取一个dom元素作为容器，再实例化echrats塞进去。它的功能在option配置里面，我们只需要配置它就可以了，这个配置项有什么就自己看官方文档吧。 echarts-for-react直接给我们提供一个容器，并且给我们塞好了实例化的echarts，只需要传option就好了，当然它还有很多属性，十分的便捷。好了，接下来由友友们自己摸索吧。小帅我这个最帅的男人要退场了，记得到小帅的评论区说一句小帅最帅哦。