记一次react使用echart的问题

在我的 react 项目中，需要使用到折线图等图表工具，于是选择了 Echart，多个图表在同一页面中展示

import React, { useEffect, useRef } from 'react'
import \* as echarts from 'echarts'

const Echarts = (props) => {
const { style = {}, chartData, isAxisChart = true } = props
const chartRef = useRef()
const echartObj = useRef(null)

//echarts 配置数据
//有坐标系
const axisOption = {
...
}
//没有坐标系
const normalOption = {
...
}

useEffect(() => {
let options
//echarts 初始化
echartObj.current = echarts.init(chartRef.current)
//设置 option
...
echartObj.current.setOption(options)
// 初始化逻辑（仅根据初始值渲染图表）
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [chartData])
return <div style={style} ref={chartRef}></div>
}
export default Echarts

发现多次实例化会控制台会输出
warning :[ECharts] There is a chart instance already initialized on the dom. Error Component Stack

因排查后发现，这是在由于在实例初始化前未进行判断是否已经实例化的原因
在初始化前加上判断即可

useEffect(() => {
let options

---

if (echartObj.current) {
echarts.dispose(echartObj.current)
}

---

//echarts 初始化
echartObj.current = echarts.init(chartRef.current)
//设置 option
...
echartObj.current.setOption(options)
// 初始化逻辑（仅根据初始值渲染图表）
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [chartData])