React--封装echarts 折线图

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

ZHuan20211123

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

阅读量383

点赞数

分类专栏： Ract 文章标签： echarts react.js 前端

本文链接：https://blog.csdn.net/ZHuan20211123/article/details/126271917

版权

本文介绍了如何在React项目中封装ECharts组件，实现折线图的绘制。通过提供的代码示例，展示了组件的使用方法，帮助开发者快速集成ECharts到前端应用。

摘要由CSDN通过智能技术生成

效果图:

封裝代码：

import React, {useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import * as echarts from 'echarts'
import 'echarts-gl'
/**
 * 图
 */
interface BBIChartProps {
    options: any;
    style?: React.CSSProperties;
    handleClick?: Function,
    onLoad?: Function,
    loading?: boolean;
}

const Chart = (props: BBIChartProps) => {
    const domRef: any = React.useRef();

    useEffect(() => {
        const {current} = domRef;
        if (current) {
            let instance: any = echarts.getInstanceByDom(current) || echarts.init(current);
            const resize = (): void => instance.resize();
            window.removeEventListener('resize', resize);
            window.addEventListener('resize', resize);

            // 加载状态
            function showLoading(instance: any): void {
                instance.showLoading('default', {
                    text: '',
                    color: 'rgba(255, 255, 255, 0.3)',
                    textColor: '#000000',
                    maskColor: 'rgba(255, 255, 255, 0)',
                    zlevel: 0,
                });
            }

            showLoading(instance);
            instance.setOption(props.options);
            instance.off("click");
            instance.on("click", (event: any) => {
                props.handleClick && props.handleClick(event);
            })
        }
    },