快捷導(dǎo)航

React?echarts?組件的封裝使用案例

更新時間：2024年06月28日 12:29:43 作者：棲北

這篇文章主要介紹了React?echarts?組件的封裝,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下

React echarts 組件的封裝

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;

使用案例

import React from "react";
import CommonChart from './pages/CommonChart/UI'
const Demo = () => {
  let echarData = [122,112,233,123,122,788,900];
  let yAxisData = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
   const chartOptions = {
            grid: {
                top: '8%',
                bottom: '15%',
                left: '30%',
                right: '16%',
                // containLabel: true,
            },
            tooltip: {
                trigger: 'item',
                show: true,
                backgroundColor: '#3A3F4D',
                borderWidth: 0,
                textStyle: {
                    // 提示框浮層的文本樣式。
                    color: '#B1B6C2',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    fontFamily: 'sans-serif',
                    fontSize: 14,
                },
                formatter: record => {
                    let result = `${record.name}：${record.value} 次`;
                    return result;
                },
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                splitLine: {
                    show: false,
                },
            },
            yAxis: {
                type: 'category',
                data: yAxisData,
                scale: true,
                axisTick: {
                    // x軸刻度線
                    show: false,
                    alignWithLabel: true,
                },
                axisLabel: {
                    interval: 0,
                    width: 80,
                    overflow: 'truncate',
                    ellipsis: '...',
                    align: 'left',
                    margin: 80,
                },
                axisLine: {
                    // 坐標軸
                    show: false,
                },
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: '#1A1E28',
                    },
                    barWidth: 12, // 柱圖寬度
                    itemStyle: {
                        normal: {
                            // 柱狀圖上顯示數(shù)量
                            label: {
                                show: true, // 是否顯示
                                position: [220, 0], // 位置
                                formatter: '{@value}' + '次', // 內(nèi)容
                                color: '#A5ADBA', // 文字顏色
                            },
                            color: '#2275F0', // 柱子顏色
                        },
                    },
                    data: echarData,
                },
            ],
        };
  return (
    <div style={{height:300, width: 400}}>
         <CommonChart options={chartOptions} />
    </div>
  );
};
export default Demo;

到此這篇關(guān)于React echarts 組件的封裝的文章就介紹到這了,更多相關(guān)React echarts 組件封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: