ccic-web/packages/component.charts/lib/gauge.js

import { jsx as _jsx } from "react/jsx-runtime";
import * as echarts from 'echarts';
import { useRef, useEffect } from 'react';
import { isEmpty, merge } from 'lodash';
import { LOADING_COLOR } from './type';
import { useSize } from 'ahooks';
export function ChartsGauge(props) {
    const { series, loading, style, options, onDownCallBack, loadingType = { color: LOADING_COLOR }, } = props;
    const contentEle = useRef();
    const chartRef = useRef();
    const defaultOptions = merge({
        series: [
            {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 100,
                splitNumber: 5,
                radius: '100%',
                center: ['50%', '90%'],
                itemStyle: {
                    borderWidth: 10,
                    shadowBlur: 0,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                },
                progress: {
                    show: true,
                    width: 5,
                },
                pointer: {
                    length: '65%',
                    width: 5,
                },
                axisLabel: {
                    color: '#999',
                    fontSize: 12,
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 5,
                    },
                },
                axisTick: {
                    splitNumber: 1,
                    lineStyle: {
                        width: 1,
                        color: '#999',
                    },
                },
                splitLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        color: '#999',
                    },
                },
                title: {
                    show: false,
                },
                detail: {
                    show: false,
                },
            },
        ],
    }, options);
    const responsive = useSize(contentEle.current);
    useEffect(() => {
        var _a;
        (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.resize();
    }, [JSON.stringify(responsive)]);
    useEffect(() => {
        if (!Boolean(chartRef.current)) {
            chartRef.current = echarts.init(contentEle.current);
        }
        if (loading) {
            chartRef.current.showLoading(Object.assign({ text: '' }, loadingType));
            return;
        }
        else {
            chartRef.current.hideLoading();
        }
        if (!isEmpty(series)) {
            const options = Object.assign({}, defaultOptions);
            options.series[0].data = series[0].data;
            chartRef.current.setOption(options);
            if (onDownCallBack) {
                chartRef.current.on('click', function (params) {
                    onDownCallBack(chartRef.current, params, options);
                });
            }
        }
    }, [series, loading]);
    return (_jsx("div", { ref: contentEle, style: Object.assign({ width: '100%', height: '100%' }, style) }));
}