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

import { jsx as _jsx } from "react/jsx-runtime";
import * as echarts from 'echarts';
import { useRef, useEffect } from 'react';
import { isEmpty, sumBy, head, merge, gt, gte, lte, ceil } from 'lodash';
import { CHARTS_COLORS, LOADING_COLOR } from './type';
import { useSize } from 'ahooks';
function getOptions(width) {
    if (gt(width, 1920)) {
        return {
            legend: {
                textStyle: {
                    width: 140,
                    fontSize: 14,
                    overflow: 'truncate',
                },
            },
            radius: ['60%', '80%'],
            center: ['40%', '50%'],
            title: {
                left: '40%',
            },
        };
    }
    else if (gte(width, 1680)) {
        return {
            legend: {
                textStyle: {
                    width: 120,
                    fontSize: 12,
                    overflow: 'truncate',
                },
            },
            radius: ['60%', '80%'],
            center: ['35%', '50%'],
            title: {
                left: '35%',
            },
        };
    }
    else if (gte(width, 1440)) {
        return {
            legend: {
                textStyle: {
                    width: 100,
                    fontSize: 10,
                    overflow: 'truncate',
                },
            },
            radius: ['50%', '70%'],
            center: ['35%', '50%'],
            title: {
                left: '35%',
            },
        };
    }
    else if (lte(width, 1440)) {
        return {
            legend: {
                textStyle: {
                    width: 80,
                    fontSize: 8,
                    overflow: 'truncate',
                },
            },
            radius: ['40%', '60%'],
            center: ['30%', '50%'],
            title: {
                left: '30%',
            },
        };
    }
    else {
        return {
            legend: {
                textStyle: {
                    width: 100,
                    fontSize: 10,
                    overflow: 'truncate',
                },
            },
            radius: ['50%', '70%'],
            center: ['35%', '50%'],
            title: {
                left: '35%',
            },
        };
    }
}
export function ChartsPie(props) {
    var _a, _b;
    const { color = CHARTS_COLORS, series, loading, style, options, onDownCallBack, loadingType = { color: LOADING_COLOR }, } = props;
    const contentEle = useRef();
    const chartRef = useRef();
    const size = useSize(document.querySelector('body'));
    // @ts-ignore
    const sizeOptions = getOptions(size === null || size === void 0 ? void 0 : size.width);
    // @ts-ignore
    const legendShow = (_a = options === null || options === void 0 ? void 0 : options.legend) === null || _a === void 0 ? void 0 : _a.show;
    const defaultOptions = merge({
        color: color,
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br />数量: {c}<br />占比: {d}%',
        },
        label: {
            formatter(params) {
                var _a;
                return `${params === null || params === void 0 ? void 0 : params.name}: ${(_a = params === null || params === void 0 ? void 0 : params.percent) !== null && _a !== void 0 ? _a : 0}%`;
            },
        },
        legend: {
            show: false,
            itemWidth: 10,
            itemHeight: 10,
        },
        title: {
            text: ceil(sumBy((_b = head(series)) === null || _b === void 0 ? void 0 : _b.data, 'value'), 2) || 0,
            top: '47%',
            textAlign: 'center',
            left: '50%',
            textStyle: {
                color: '#333',
                fontSize: 22,
                fontWeight: '400',
            },
        },
    }, options, legendShow ? sizeOptions : {});
    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();
        }
        if (!isEmpty(series)) {
            chartRef.current.setOption(Object.assign(Object.assign({}, defaultOptions), { series: series.map((item) => (Object.assign(Object.assign({ radius: sizeOptions.radius, center: legendShow ? sizeOptions.center : ['50%', '50%'] }, item), { type: 'pie' }))) }));
            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) }));
}