基于React Hooks 封装一个Echarts组件

基于React Hooks 封装一个Echarts组件

官网 https://echarts.apache.org/zh/index.html

1 Echarts全局配置

echarts.config.js

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart,PieChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LegendComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';


// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    LegendComponent,
    PieChart
]);

export default echarts;

2 封装React Echarts组件

import React, { useEffect, useRef，memo } from 'react'

import echarts from './echarts.config'

import './ReactEchartComponent.css'

const ReactEchartComponent = (props) => {

    const { option: chartOptions, clickHandler, className } = props

    const dom = useRef()

    useEffect(() => {
        if (chartOptions) {
            const chart = echarts.init(dom.current)
            // chart.showLoading()
            clickHandler && chart.on('click', clickHandler)
            chart.setOption(chartOptions)
            // chart.hideLoading()
        }
    }, [chartOptions, clickHandler])

    return (
        <div className={className} ref={dom}></div>
    )
}

export memo(ReactEchartComponent)

3 使用组件

import React from 'react'
import { useCallback } from 'react';
import { ReactEchartComponent } from '../component/ReactEchartComponent';

import './ReactEchartDemo.css'


const option = {
    legend: {
        orient: 'vertical',
        x: 'right',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    series: [
        {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'left',
                emphasis: {
                    show: true
                }
            },
            labelLine: {
                show: true
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            data: [
                { value: 335, name: 'A' },
                { value: 310, name: 'B' },
                { value: 234, name: 'C' },
                { value: 135, name: 'D' },
                { value: 1548, name: 'E' }
            ]
        }
    ]
};

export const ReactEchartDemo = () => {

    const clickHandler = useCallback(
        (e) => {
            console.log(e);
        }, [])

    return (
        <div className='con'>
            <ReactEchartComponent clickHandler={clickHandler} className="chart" option={option}></ReactEchartComponent>
        </div>
    )
}