使用步骤：

1.安装

npm install echarts

2.引入 ECharts

// 柱状图组件
import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
// 1. 把功能代码都放到这个组件中
// 2. 把可变的部分抽象成prop参数const BarChart = ({ title }) => {const chartRef = useRef(null)useEffect(() => {// 保证dom可用 才进行图表的渲染// 1. 获取渲染图表的dom节点const chartDom = chartRef.current// 2. 图表初始化生成图表实例对象const myChart = echarts.init(chartDom)// 3. 准备图表参数const option = {title: {text: title},xAxis: {type: 'category',data: ['Vue', 'React', 'Angular']},yAxis: {type: 'value'},series: [{data: [10, 40, 70],type: 'bar'}]}// 4. 使用图表参数完成图表的渲染option && myChart.setOption(option)}, [title])return <div ref={chartRef} style={{ width: '500px', height: '400px' }}></div>
}export default BarChart

3.注意

1. 在useEffect中使用，保证dom元素可用
2. 挂载的dom元素，必须规定宽高