安装

npm install echarts

组件封装

// 柱状图组件封装
import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'

// 把可变的部分抽象成prop参数

const BarChart = ({ title }) => {
    const chartRef = useRef(null)
    useEffect(() => {
        // 保证dom可用 才进行图表的渲染
        function renderChart() {
            // 1. 获取渲染图表的dom节点
            const chartDom = chartRef.current
            // 2. 图表初始化生成图表实例对象
            const myChart = echarts.init(chartDom);
            // 3. 准备图表参数
            const option = {
                title: {
                    text: title
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar'
                    }
                ]
            };
            // 4. 使用图表参数完成图表的渲染
            option && myChart.setOption(option);
        }
        renderChart()
    }, [title])
    return <div ref={chartRef} style={{ width: '400px', height: '300px' }}></div>
}
export default BarChart

<BarChart title='基础'></BarChart>

image.png