React echarts 组件的封装

最新推荐文章于 2024-06-27 21:01:35 发布

栖北

最新推荐文章于 2024-06-27 21:01:35 发布

阅读量1.2k

点赞数

分类专栏：功能组件 react 文章标签： echarts react.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45945214/article/details/126834723

版权

import React, { useEffect, useRef } from 'react';
import { useSize, useDebounceEffect } from 'ahooks';
import LoopShowTooltip from './echartsTooltipLoop';
import * as echarts from 'echarts';

const CommonChart = props => {
    const { chartId, options, autoTooltip } = props;
    const chartRef = useRef();
    const size = useSize(chartRef);
    const loopRef = useRef();

    useEffect(() => {
        let chartDom;
        let myChart;
        if (loopRef.current) {
            loopRef.current?.clearLoop();
            loopRef.current = null;
        }
        setTimeout(() => {
            if (loopRef.current) {
                loopRef.current?.clearLoop();
                loopRef.current = null;
            }
            if (chartRef) {
                chartDom = chartRef.current;
                myChart = echarts.init(chartDom);
                options && myChart.setOption(options);
                if (autoTooltip) {
                    loopRef.current = new LoopShowTooltip(myChart, options, {});
                }
            }
        });
        window.onresize = () => {
            myChart.resize();
        };
        return () => {
            window.onresize = null;
            loopRef?.current?.clearLoop();
            loopRef.current = null;
        };
    }, [chartId, options]);

    useDebounceEffect(() => {
        let myChart;
        let chartDom;
        if (chartRef) {
            chartDom = chartRef.current;
            myChart = echarts.init(chartDom);
            options && myChart.setOption(options);
            myChart.resize();
        }
        window.onresize = () => {
            myChart.resize();
        };
    }, [size], {
        wait: 100,
    });

    return <div ref={chartRef} style={
  { width: '100%', height: '100%' }}></div>;
};

export default CommonChart;

export default class LoopShowTooltip {
    constructor(chart, chartOption, options) {
        /**
         * @param chart ECharts实例
         * @param chartOption echarts的配置信息
         * @param options object 选项
         */
        this.chart = chart;
        this.chartOption = chartOption;
        this.options = options;
        this.defaultOptions = {
            in

最低0.47元/天解锁文章