ccic-web/packages/component.charts/lib/radar.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 { CHARTS_COLORS, LOADING_COLOR } from './type';
import { useSize } from 'ahooks';
export function ChartsRadar(props) {
    const { color = CHARTS_COLORS, series, loading, style, options, loadingType = { color: LOADING_COLOR }, } = props;
    const contentEle = useRef();
    const chartRef = useRef();
    const defaultOptions = merge({
        color: color,
        title: {
            show: false,
        },
        legend: {
            show: true,
            itemWidth: 10,
            itemHeight: 10,
            top: 0,
        },
        tooltip: {
            trigger: 'item',
        },
    }, 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 (!chartRef.current) {
            chartRef.current = echarts.init(contentEle.current);
        }
        if (loading) {
            chartRef.current.showLoading(Object.assign({ text: '' }, loadingType));
            return;
        }
        else {
            chartRef.current.hideLoading();
        }
        window.onresize = function () {
            var _a;
            (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.resize();
        };
        if (!isEmpty(series)) {
            chartRef.current.setOption(Object.assign(Object.assign({}, defaultOptions), { series: series.map((item) => (Object.assign({ type: 'radar', data: item.data }, item))) }));
        }
    }, [series, loading]);
    return (_jsx("div", { ref: contentEle, style: Object.assign({ width: '100%', height: '100%' }, style) }));
}