react hooks 实现echarts_综合

安装依赖

npm install --save echarts-for-react
//如果需要使用echarts的一些特殊方法需要安装
npm install --save echarts

代码实现

import React,{
     useRef, useEffect }  from 'react'
import echarts from 'echarts'const Test=()=>{
    const echartRef =useRef(null)useEffect(()=>{
    var globalEchart;if(globalEchart===undefined){
    globalEchart =echarts.init(echartRef.current);}else{
    globalEchart.clear()}var option = {
    xAxis: {
    type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {
    type: 'value'},series: [{
    data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]}globalEchart.setOption(option);},[])return (<>//Dom 代码<div id={
    'main'} style={
    {
    height: 400}}/></>)
}
export default Test;

实现效果如下
react hooks 实现echarts