ccic-web/packages/component.charts/lib/mix.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 ChartsMix(props) {
    const { color = CHARTS_COLORS, category = [], series, loading, style, smooth, options, loadingType = { color: LOADING_COLOR }, } = props;
    const contentEle = useRef();
    const chartRef = useRef();
    const defaultOptions = merge({
        color: color,
        title: {
            show: false,
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            show: true,
            itemWidth: 10,
            itemHeight: 10,
            left: 'right',
            top: 0,
        },
        grid: {
            top: 30,
            left: 0,
            right: 0,
            bottom: 0,
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: category,
            axisPointer: {
                type: 'shadow',
            },
        },
        yAxis: [
            {
                type: 'value',
                splitLine: {
                    show: true,
                },
            },
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} %',
                },
                splitLine: {
                    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 (!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({ type: 'line', data: item.data, smooth: smooth || true, barWidth: 20, symbol: 'none', itemStyle: {
                        color: item.color,
                    } }, item))) }));
        }
    }, [series, loading]);
    return (_jsx("div", { ref: contentEle, style: Object.assign({ width: '100%', height: '100%' }, style) }));
}