ccic-web/packages/component.charts/lib/bar.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 ChartsBar(props) {
    const { color = CHARTS_COLORS, category = [], series, loading, style, options, onDownCallBack, 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',
        },
    }, 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(Object.assign({}, defaultOptions), { series: series.map((item) => (Object.assign({ type: 'bar', data: item.data, barMaxWidth: 30 }, item))) });
            chartRef.current.setOption(options);
            if (onDownCallBack) {
                chartRef.current.on('click', function (params) {
                    onDownCallBack(chartRef.current, params, options);
                });
            }
        }
        else {
            chartRef.current.setOption(options);
        }
    }, [series, loading]);
    return (_jsx("div", { ref: contentEle, style: Object.assign({ width: '100%', height: '100%' }, style) }));
}