useChart

index.jsx

import React, { useEffect } from 'react'
const echarts = require('echarts')

function useChart(chartRef, options) {
  let myChart = null

  function renderChart() {
    const chart = echarts.getInstanceByDom(chartRef.current)
    if (chart) {
      myChart = chart
    } else {
      myChart = echarts.init(chartRef.current)
    }
    myChart.setOption({
      color: ['#4095FF', '#65E2DC', '#FF6F6F', '#FFD16D', '#FF9D6F', '#6F6FFF'],
      ...options,
    }, {
      notMerge: true,
    })
  };

  useEffect(() => {
    if (chartRef.current) {
      renderChart()
    }
  }, [options])

  useEffect(() => {
    const resizeFn = () => {
      myChart && myChart.resize()
    }
    window.addEventListener('resize', resizeFn)
    return () => {
      window.removeEventListener('resize', resizeFn)
      myChart && myChart.dispose()
    }
  }, [])
}

export default useChart

使用范例

XXX.jsx

import React, { useRef, useEffect, useState } from 'react'
import useChart from './useChart'

function MultiChart(props) {
// 图表配置项需要自己根据需要进行数据组装
  Object.keys(props.data || {}).forEach(key => {
    let option = props?.data?.[key]
    if (option) {
      option = {
        legend: {
          orient: 'vertical',
          show: true,
          top: 'middle',
          left: 'right',
        },
        tooltip: {
          show: true,
          valueFormatter: value => `${parseFloat((value * 100).toFixed(2))}%`,
        },
        ...option,
        series: option.series.map(v => {
          if (v.type === 'bar') {
            return {
              barMaxWidth: 40,
              ...v,
            }
          } else return v
        }),
      }
    }
    useChart({ current: document.getElementById(key) || null }, option || {})
  })
  return <div>
    {
      Object.keys(props.data || {}).map(key => (
        <div style={{ height: 300, width: '100%' }} id={key} key={key} />
      ))
    }
  </div>
}

export default MultiChart