Echart-react封装echart图表(React版)

最新推荐文章于 2025-10-10 15:23:27 发布

原创最新推荐文章于 2025-10-10 15:23:27 发布 · 594 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #echarts #javascript

Echart 专栏收录该内容

27 篇文章

订阅专栏

该博客主要介绍了如何在React应用中使用ECharts库来创建和渲染图表。首先，通过useState和useRef管理状态和引用。然后，利用useEffect创建一个随机ID并初始化ECharts实例。最后，当options改变时，更新ECharts的配置项，实现图表的动态渲染。博客内容涉及到React Hook的运用和ECharts的集成。

思路:
外层只需要传入options即可进行渲染操作

import { useState, useEffect , useRef} from 'react';
import * as echarts from 'echarts';
import { generateMixed } from '../../utils/common';
import './index.css';


export default function EchartInit(props: any) {
  // 传入options配置项
  const { options } = props;
  

  const [echartID, setEchartID] = useState<string>('kop');
  const echartRef = useRef(null);
  let echart = null;
  useEffect(() => {
    setEchartID(generateMixed(32));

  },[])
  useEffect(() => {
    // 生成32位随机码当dom元素ID
    let dom = document.getElementById(echartID);
    // 实例化echart对象
    echart = echarts.init(dom as HTMLElement);
    // 渲染
    echart && echart.setOption(options)
  }, [options])

  return (
    <div id={echartID} ref={echartRef} className='echart-content'></div>
  )
}

index.css


.echart-content {
  height: 100%;
  width: 100%;
}

生成随机码


export function generateMixed(n: number) {
  var chars = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
  var res = "";
  for (var i = 0; i < n; i++) {
    var id = Math.floor(Math.random() * 62);
    res += chars[id];
  }
  return res;
}