在react项目中使用ECharts 图表工具。

在我们的日常开发中不可避免的会碰到需要写图表的需求。我自己使用的技术站是react，所以我这边就记录一下。自己的使用心得，如果有什么不对的地方和有更好的方法请及时指出来在问题。在此非常的感谢！

在react项目中引入ECharts的官网上面有两引入方式。一种是按需引入，另一种是全部引入的方式。因为我的这次的需要多种类型的图表，我这边选择就全部引入的方式。

ECharts安装还是非常的方便的直接使用下面的命令就可以： npm install echarts --save

在react中使用ECharts，虽然ECharts官方提供的方法已经很方便了。我这边建议在自己使用的时候再进行一次二次封装，在自己的项目中使用会方便一些。这是我在碰到一个项目中碰到多种图表使用已经使用的次数比较多的时候总结出来的。

下面是我自己封装一个组件：

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

function CustomCharts(props) {
    const { option, customClassName } = props;

    const chartsNode = useRef(null);

    useLayoutEffect(() => {
        const mayCharts = chartsNode.current && echarts.init(chartsNode.current);
        mayCharts && mayCharts.setOption(option);
    }, [option]);

    return <div className={customClassName} ref={chartsNode} />;
}
export default CustomCharts;

对ECharts的二次封装是非常简单的，同时在使用EChats的使用也省去没有这些代码重复的代码。只有需要通过传入 option 对象和 customClassName 样式类名来控制ECharts的样式和对ECharts的配置。

下面我就说一下自己的使用方式以及ECharts常用的几个属性：

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

// ECharts的配置信息
const EChartsConfigInfo = {
    grid: { // 控制 折线图，柱状图，散点图（气泡图）的整体样式
        top: '10%', // 控制图表距离容器的顶部的距离 可以写百分比也可以写具体的数据
        left: '5%', // 控制图表距离容器的左边的距离 可以写百分比也可以写具体的数据
        right: '5%', // 控制图表距离容器的右边的距离 可以写百分比也可以写具体的数据
        bottom: '10%', // 控制图表距离容器的底部的距离 可以写百分比也可以写具体的数据
    },
    xAxis: { // 控制图表中X周的样式功能设置
        type: 'category', // 坐标轴类型  文档中写的很详细 类型就不一一介绍
        axisTick: {  // 设置坐标轴刻度的相关设置
            show: false, 
        },
        axisLine: {  坐标轴轴线相关设置
            lineStyle: { 坐标轴轴线样式的设置
                color: '#999',
            },
        },
    },
    yAxis: { / 控制图表中Y轴的样式功能设置
        axisLabel: {  // 坐标轴刻度标签的相关设置。
            show: false,
        },
    },
    axisLabel: { 坐标轴刻度标签的相关设置。
        color: '#666666',
        fontSize: 16,
    },
    series: [
        {
            type: 'bar', // 图标的类型
            barWidth: '40%', // 柱条的宽度
            itemStyle: { 图形样式。
                color: '#0c9',
                borderRadius: [4, 4, 0, 0],
            }, 
            label: { 图形上的文本标签样式
                show: true,
                color: '#fff',
                fontSize: 14,
                position: 'insideTop',
            },
        },
    ],
};

function Temp() {
    const [errorDistributionData, setErrorDistributionData] = useState(null); // 错题分布数据
 
    useEffect(() => {
        // 这里是模拟的动态数据， 项目中可以修改为动态数据
        errorDistributionConfigInfo.xAxis.data = ['单选题', '多选题', '判断题', '专项练习'];
        errorDistributionConfigInfo.series[0].data = [12, 45, 56, 77];

        setErrorDistributionData({ ...errorDistributionConfigInfo });
    }, []);

    return {errorDistributionData && (<PracticeComIntelligentAtlasCharts option={errorDistributionData} customClassName='charts-width h-400' />}
}

export default Temp;

在这篇中只是介绍的在react中怎么使用ECharts，以及简单的配置一个柱状图。后续会再更新出一篇 EChats常用的图表的基本配置。

参考配置文档： echarts.apache.org/zh/option.h…

参考示例文档： www.makeapie.cn/echarts_cat…