win-chart 3.0.0 → 3.0.2

package/dist/index.js

@@ -1,1219 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { styled } from "styled-components";
-import { useEffect, useRef, useState } from "react";
-import { rgba } from "polished";
-import deepmerge from "deepmerge";
-import "echarts-gl";
-import * as __WEBPACK_EXTERNAL_MODULE_echarts__ from "echarts";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) Object.defineProperty(exports, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports, '__esModule', {
-            value: true
-        });
-    };
-})();
-var types_namespaceObject = {};
-__webpack_require__.r(types_namespaceObject);
-__webpack_require__.d(types_namespaceObject, {
-    f: ()=>types_WinChartType
-});
-const ChartWrapper = styled.div`
-  height: 100%;
-`;
-var types_WinChartType = /*#__PURE__*/ function(WinChartType) {
-    WinChartType[WinChartType["MINI_AREA"] = 0] = "MINI_AREA";
-    WinChartType[WinChartType["AREA"] = 1] = "AREA";
-    WinChartType[WinChartType["DUAL_LINE_BAR"] = 2] = "DUAL_LINE_BAR";
-    WinChartType[WinChartType["STACK_DUAL_LINE_BAR"] = 3] = "STACK_DUAL_LINE_BAR";
-    WinChartType[WinChartType["COLUMN"] = 4] = "COLUMN";
-    WinChartType[WinChartType["STACK_COLUMN"] = 5] = "STACK_COLUMN";
-    WinChartType[WinChartType["LINE"] = 6] = "LINE";
-    WinChartType[WinChartType["BAR"] = 7] = "BAR";
-    WinChartType[WinChartType["STACK_BAR"] = 8] = "STACK_BAR";
-    WinChartType[WinChartType["FUNNEL"] = 9] = "FUNNEL";
-    WinChartType[WinChartType["PIE"] = 10] = "PIE";
-    WinChartType[WinChartType["CYCLE"] = 11] = "CYCLE";
-    WinChartType[WinChartType["RADAR"] = 12] = "RADAR";
-    return WinChartType;
-}({});
-const COLOR_LIST = [
-    '#3D84FF',
-    '#00DCF0',
-    '#FCBC26',
-    '#00DB75',
-    '#BDB8FF',
-    '#40B4FF',
-    '#FFA101',
-    '#90ABE0',
-    '#6EE67A',
-    '#6B84FF',
-    '#FA6B69'
-];
-const commonOpt = {
-    grid: {
-        top: 24,
-        left: 0,
-        right: 12,
-        bottom: 32,
-        containLabel: true
-    },
-    color: COLOR_LIST,
-    legend: {
-        itemWidth: 10,
-        itemHeight: 10,
-        bottom: 0,
-        type: 'scroll',
-        icon: 'circle'
-    }
-};
-function isNonEmptyArray(data) {
-    return Array.isArray(data) && data.length > 0;
-}
-const handleToPercent = (value, num = 2)=>'number' == typeof value ? `${Number((100 * value).toFixed(num))}%` : '-%';
-function arrDeduplication(data) {
-    if (Array.isArray(data)) return [
-        ...new Set(data)
-    ];
-    return [];
-}
-const arraySum = (list)=>{
-    if (Array.isArray(list) && 0 !== list.length) return list.reduce((a, b)=>{
-        const temp = Number(b);
-        return a + (Object.is(temp, NaN) ? 0 : temp);
-    }, 0);
-    return 0;
-};
-const checkEntityArr = (data)=>Array.isArray(data) && data.length > 0;
-const dataDescOrder = (data, order = 'desc')=>{
-    if (Array.isArray(data) && 'asc' === order) {
-        const _data = JSON.parse(JSON.stringify(data));
-        return _data.sort((a, b)=>a.value - b.value);
-    }
-    if (Array.isArray(data) && 'desc' === order) {
-        const _data = JSON.parse(JSON.stringify(data));
-        return _data.sort((a, b)=>b.value - a.value);
-    }
-    return data;
-};
-const getAxisOpt = (winChartProps)=>{
-    let data = winChartProps.data;
-    if (!checkEntityArr(data)) data = winChartProps.extraData;
-    return {
-        boundaryGap: true,
-        axisTick: {
-            alignWithLabel: true
-        },
-        data: arrDeduplication(data?.map((item)=>item.label)),
-        axisLabel: {
-            rotate: winChartProps.xAxisLabelRotate,
-            formatter: (name)=>{
-                const configLength = winChartProps.xAxisLabelLength;
-                if ('number' == typeof configLength && name.length > configLength) return `${name.slice(0, configLength)}...`;
-                return name;
-            }
-        }
-    };
-};
-const sortArray = (arr, order)=>{
-    if ('asc' === order) arr.sort((a, b)=>a.value - b.value);
-    else if ('desc' === order) arr.sort((a, b)=>b.value - a.value);
-    return arr;
-};
-const sortArrayByLabel = (arr, sortedLabels)=>{
-    arr.sort((a, b)=>{
-        const indexA = sortedLabels.indexOf(a.label);
-        const indexB = sortedLabels.indexOf(b.label);
-        return indexA - indexB;
-    });
-    return arr;
-};
-const handleSort = (winChartProps)=>{
-    const { data, extraData, sort } = winChartProps;
-    if (data && sort) {
-        const sortedData = sortArray([
-            ...data
-        ], sort);
-        const sortedLabels = arrDeduplication(sortedData.map((item)=>item.label));
-        const finalSortData = sortArrayByLabel(sortedData, sortedLabels);
-        const finalSortedExtraData = sortArrayByLabel([
-            ...extraData ?? []
-        ], sortedLabels);
-        return {
-            ...winChartProps,
-            data: finalSortData,
-            extraData: finalSortedExtraData
-        };
-    }
-    return winChartProps;
-};
-function debounce(func, delay) {
-    let timer = null;
-    return function(...args) {
-        clearTimeout(timer);
-        timer = setTimeout(()=>{
-            func.apply(globalThis, args);
-        }, delay);
-    };
-}
-const mergeSeriesOption = (option, seriesOption)=>{
-    if (isNonEmptyArray(option.series) && isNonEmptyArray(seriesOption)) seriesOption.forEach((config)=>{
-        option.series = option.series.map((item)=>({
-                ...item,
-                ...item.name === config.name && config
-            }));
-    });
-    return option;
-};
-const getLabelColor = (opt)=>'dark' === opt.theme ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)';
-function aggregateStackData(data) {
-    const result = data.reduce((acc, item)=>{
-        const { label, value } = item;
-        if (!acc[label]) acc[label] = 0;
-        if (value) acc[label] += Number(value);
-        return acc;
-    }, {});
-    const totals = Object.values(result).map((totalValue)=>parseFloat(totalValue.toFixed(2)));
-    return totals;
-}
-const getMiniAreaOpt = (winChartProps)=>{
-    const barTypeList = arrDeduplication(winChartProps.data?.map((item)=>item.type));
-    const color = winChartProps.color;
-    return {
-        color,
-        grid: {
-            top: 4,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            containLabel: true
-        },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
-        legend: {
-            show: false
-        },
-        xAxis: {
-            show: false,
-            boundaryGap: false,
-            data: arrDeduplication(winChartProps.data?.map((item)=>item.label))
-        },
-        yAxis: {
-            show: false,
-            min: winChartProps.yStart?.[0]
-        },
-        series: [
-            ...barTypeList.map((name, index)=>{
-                const areaColor = color?.[index] ?? COLOR_LIST[index];
-                return {
-                    name,
-                    type: 'line',
-                    smooth: true,
-                    lineStyle: {
-                        width: 2
-                    },
-                    showSymbol: false,
-                    areaStyle: {
-                        opacity: 0.8,
-                        color: new __WEBPACK_EXTERNAL_MODULE_echarts__.graphic.LinearGradient(0, 0, 0, 1, [
-                            {
-                                offset: 0,
-                                color: rgba(areaColor, 0.5)
-                            },
-                            {
-                                offset: 1,
-                                color: 'dark' === winChartProps.theme ? rgba('gray', 0.1) : '#fff'
-                            }
-                        ])
-                    },
-                    emphasis: {
-                        focus: 'series'
-                    },
-                    ...winChartProps.showLabel && {
-                        label: {
-                            show: true,
-                            formatter: '{c}',
-                            position: 'top'
-                        }
-                    },
-                    data: winChartProps.data?.filter((item)=>item.type === name).map((item)=>item.value)
-                };
-            })
-        ]
-    };
-};
-const getAreaOpt = (winChartProps)=>{
-    const barTypeList = arrDeduplication(winChartProps.data?.map((item)=>item.type));
-    return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll'
-        },
-        xAxis: getAxisOpt(winChartProps),
-        yAxis: {
-            min: winChartProps.yStart?.[0]
-        },
-        series: [
-            ...barTypeList.map((name, index)=>{
-                const areaColor = COLOR_LIST[index];
-                return {
-                    name,
-                    type: 'line',
-                    smooth: true,
-                    lineStyle: {
-                        width: 2
-                    },
-                    showSymbol: false,
-                    areaStyle: {
-                        opacity: 0.8,
-                        color: new __WEBPACK_EXTERNAL_MODULE_echarts__.graphic.LinearGradient(0, 0, 0, 1, [
-                            {
-                                offset: 0,
-                                color: rgba(areaColor, 0.5)
-                            },
-                            {
-                                offset: 1,
-                                color: 'dark' === winChartProps.theme ? rgba('gray', 0.1) : '#fff'
-                            }
-                        ])
-                    },
-                    emphasis: {
-                        focus: 'series'
-                    },
-                    ...winChartProps.showLabel && {
-                        label: {
-                            show: true,
-                            formatter: '{c}',
-                            position: 'top'
-                        },
-                        showSymbol: true
-                    },
-                    data: winChartProps.data?.filter((item)=>item.type === name).map((item)=>item.value)
-                };
-            })
-        ]
-    };
-};
-const getDualOpt = (winChartProps)=>{
-    const barTypeList = arrDeduplication(winChartProps.data?.map((item)=>item.type));
-    const lineTypeList = arrDeduplication(winChartProps.extraData?.map((item)=>item.type));
-    return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                crossStyle: {
-                    color: '#999'
-                },
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll'
-        },
-        xAxis: {
-            ...getAxisOpt(winChartProps),
-            axisPointer: {
-                type: 'shadow'
-            }
-        },
-        yAxis: [
-            {
-                alignTicks: true,
-                min: winChartProps.yStart?.[0]
-            },
-            {
-                alignTicks: true,
-                min: winChartProps.yStart?.[1]
-            }
-        ],
-        series: [
-            ...barTypeList.map((name)=>({
-                    name,
-                    type: 'bar',
-                    barGap: '30%',
-                    barCategoryGap: '30%',
-                    barMaxWidth: 8,
-                    ...winChartProps.showLabel && {
-                        label: {
-                            show: true,
-                            formatter: '{c}',
-                            position: 'top'
-                        }
-                    },
-                    data: winChartProps.data?.filter((item)=>item.type === name).map((item)=>({
-                            value: item.value,
-                            itemStyle: {
-                                borderRadius: item.value > 0 ? [
-                                    500,
-                                    500,
-                                    0,
-                                    0
-                                ] : [
-                                    0,
-                                    0,
-                                    500,
-                                    500
-                                ]
-                            }
-                        }))
-                })),
-            ...lineTypeList.map((name)=>({
-                    name,
-                    type: 'line',
-                    smooth: true,
-                    yAxisIndex: 1,
-                    showSymbol: false,
-                    ...winChartProps.showLabel && {
-                        label: {
-                            show: true,
-                            formatter: '{c}',
-                            position: 'top'
-                        }
-                    },
-                    data: winChartProps.extraData?.filter((item)=>item.type === name).map((item)=>item.value)
-                }))
-        ]
-    };
-};
-const getStackDualOpt = (winChartProps)=>{
-    const barTypeList = arrDeduplication(winChartProps.data?.map((item)=>item.type));
-    const lineTypeList = arrDeduplication(winChartProps.extraData?.map((item)=>item.type));
-    return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                crossStyle: {
-                    color: '#999'
-                },
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll'
-        },
-        xAxis: {
-            ...getAxisOpt(winChartProps),
-            axisPointer: {
-                type: 'shadow'
-            }
-        },
-        yAxis: [
-            {
-                alignTicks: true,
-                min: winChartProps.yStart?.[0]
-            },
-            {
-                alignTicks: true,
-                min: winChartProps.yStart?.[1]
-            }
-        ],
-        series: [
-            ...barTypeList.map((name)=>({
-                    name,
-                    type: 'bar',
-                    stack: 'total',
-                    barGap: '30%',
-                    barCategoryGap: '30%',
-                    barMaxWidth: 8,
-                    ...winChartProps.showLabel && {
-                        label: {
-                            show: true,
-                            formatter: '{c}',
-                            position: 'top'
-                        }
-                    },
-                    data: winChartProps.data?.filter((item)=>item.type === name).map((item)=>({
-                            value: item.value
-                        }))
-                })),
-            ...lineTypeList.map((name)=>({
-                    name,
-                    type: 'line',
-                    smooth: true,
-                    yAxisIndex: 1,
-                    showSymbol: false,
-                    ...winChartProps.showLabel && {
-                        label: {
-                            show: true,
-                            formatter: '{c}',
-                            position: 'top'
-                        }
-                    },
-                    data: winChartProps.extraData?.filter((item)=>item.type === name).map((item)=>item.value)
-                }))
-        ]
-    };
-};
-const getPieOpt = (winChartProps)=>{
-    const total = arraySum(winChartProps.data?.map((item)=>item.value));
-    return {
-        tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll'
-        },
-        series: [
-            {
-                top: -30,
-                type: 'pie',
-                radius: '50%',
-                data: dataDescOrder(winChartProps.data)?.map((item)=>({
-                        value: item.value,
-                        name: winChartProps.reserveValueWithLabelType ? item.label : item.type
-                    })),
-                label: {
-                    show: true,
-                    fontSize: 12,
-                    color: getLabelColor(winChartProps),
-                    position: 'outside',
-                    formatter: (data)=>handleToPercent(data.value / (total || 1))
-                },
-                emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)'
-                    }
-                }
-            }
-        ]
-    };
-};
-const getPieCycleOpt = (winChartProps)=>{
-    const total = arraySum(winChartProps.data?.map((item)=>item.value));
-    return {
-        tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll'
-        },
-        series: [
-            {
-                top: -30,
-                type: 'pie',
-                radius: [
-                    '60%',
-                    '48%'
-                ],
-                data: dataDescOrder(winChartProps.data, winChartProps.sort)?.map((item)=>({
-                        value: item.value,
-                        name: winChartProps.reserveValueWithLabelType ? item.label : item.type
-                    })),
-                label: {
-                    show: true,
-                    fontSize: 12,
-                    color: getLabelColor(winChartProps),
-                    position: 'outside',
-                    formatter: (data)=>handleToPercent(data.value / (total || 1))
-                },
-                emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)'
-                    }
-                }
-            }
-        ],
-        graphic: [
-            {
-                type: 'text',
-                left: 'center',
-                top: winChartProps.cycleCenterConfig?.content?.top ?? 76,
-                style: {
-                    text: winChartProps.cycleCenterConfig?.content?.value ?? Number(total.toFixed(2)).toString(),
-                    fill: 'dark' === winChartProps.theme ? '#fff' : '#12161F',
-                    fontFamily: 'roboto',
-                    fontSize: winChartProps.cycleCenterConfig?.content?.fontSize ?? 28,
-                    fontWeight: 'bold'
-                }
-            },
-            {
-                type: 'text',
-                left: 'center',
-                top: winChartProps.cycleCenterConfig?.title?.top ?? 112,
-                style: {
-                    text: winChartProps.cycleCenterConfig?.title?.value ?? "\u603B\u8BA1",
-                    fill: 'dark' === winChartProps.theme ? '#fff' : '#394252 ',
-                    fontSize: winChartProps.cycleCenterConfig?.title?.fontSize ?? 14
-                }
-            }
-        ]
-    };
-};
-const getLineOpt = (winChartProps)=>{
-    const typeList = arrDeduplication(winChartProps.data?.map((item)=>item.type));
-    return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll'
-        },
-        xAxis: getAxisOpt(winChartProps),
-        yAxis: {
-            min: winChartProps.yStart?.[0]
-        },
-        series: typeList.map((name)=>({
-                name,
-                type: 'line',
-                smooth: false,
-                lineStyle: {
-                    width: 2
-                },
-                showSymbol: true,
-                emphasis: {
-                    focus: 'series'
-                },
-                ...winChartProps.showLabel && {
-                    label: {
-                        show: true,
-                        formatter: '{c}',
-                        position: 'top'
-                    }
-                },
-                data: winChartProps.data?.filter((item)=>item.type === name).map((item)=>item.value)
-            }))
-    };
-};
-const getColumnOpt = (winChartProps)=>{
-    const barTypeList = arrDeduplication(winChartProps.data?.map((item)=>item.type));
-    return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll'
-        },
-        xAxis: {
-            ...getAxisOpt(winChartProps),
-            axisPointer: {
-                type: 'shadow'
-            }
-        },
-        yAxis: {
-            min: winChartProps.yStart?.[0]
-        },
-        series: barTypeList.map((name)=>({
-                name,
-                type: 'bar',
-                barGap: '30%',
-                barCategoryGap: '30%',
-                barMaxWidth: 8,
-                ...winChartProps.showLabel && {
-                    label: {
-                        show: true,
-                        formatter: '{c}',
-                        position: 'top'
-                    }
-                },
-                data: winChartProps.data?.filter((item)=>item.type === name).map((item)=>({
-                        value: item.value,
-                        itemStyle: {
-                            borderRadius: item.value > 0 ? [
-                                500,
-                                500,
-                                0,
-                                0
-                            ] : [
-                                0,
-                                0,
-                                500,
-                                500
-                            ]
-                        }
-                    }))
-            }))
-    };
-};
-const getColumnStackOpt = (winChartProps)=>{
-    const barTypeList = arrDeduplication(winChartProps.data?.map((item)=>item.type));
-    return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll'
-        },
-        xAxis: {
-            ...getAxisOpt(winChartProps),
-            axisPointer: {
-                type: 'shadow'
-            }
-        },
-        yAxis: {
-            min: winChartProps.yStart?.[0]
-        },
-        series: barTypeList.map((name)=>({
-                name,
-                type: 'bar',
-                stack: 'total',
-                barGap: '30%',
-                barCategoryGap: '30%',
-                barMaxWidth: 8,
-                ...winChartProps.showLabel && {
-                    label: {
-                        show: true,
-                        formatter: '{c}',
-                        position: 'top'
-                    }
-                },
-                data: winChartProps.data?.filter((item)=>item.type === name).map((item)=>({
-                        value: item.value
-                    }))
-            }))
-    };
-};
-const getFunnelOpt = (winChartProps)=>{
-    const data = dataDescOrder(winChartProps.data)?.map((item)=>({
-            value: item.value ?? 0,
-            name: winChartProps.reserveValueWithLabelType ? item.label : item.type
-        })) ?? [];
-    const seriesConfig = {
-        type: 'funnel',
-        minSize: '20%',
-        left: 10,
-        top: 24,
-        width: '76%',
-        sort: 'descending',
-        data
-    };
-    return {
-        tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll'
-        },
-        series: [
-            {
-                ...seriesConfig,
-                label: {
-                    show: true,
-                    position: 'outer',
-                    formatter: '{c}'
-                }
-            },
-            {
-                ...seriesConfig,
-                emphasis: {
-                    label: {
-                        fontSize: 20
-                    }
-                },
-                label: {
-                    show: true,
-                    position: 'inner',
-                    color: '#fff',
-                    formatter: (params)=>{
-                        const currentIndex = params.dataIndex;
-                        if (0 === currentIndex) return '100%';
-                        const prevValue = data[currentIndex - 1].value;
-                        return handleToPercent(params.value / prevValue);
-                    }
-                }
-            }
-        ]
-    };
-};
-const getBarOpt = (winChartProps)=>{
-    const barTypeList = arrDeduplication(winChartProps.data?.map((item)=>item.type));
-    return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll'
-        },
-        xAxis: {},
-        yAxis: {
-            data: arrDeduplication(winChartProps.data?.map((item)=>item.label)),
-            axisTick: {
-                alignWithLabel: true
-            },
-            axisPointer: {
-                type: 'shadow'
-            },
-            min: winChartProps.yStart?.[0],
-            axisLabel: {
-                rotate: winChartProps.xAxisLabelRotate,
-                formatter: (name)=>{
-                    const configLength = winChartProps.xAxisLabelLength;
-                    if ('number' == typeof configLength && name.length > configLength) return `${name.slice(0, configLength)}...`;
-                    return name;
-                }
-            }
-        },
-        series: barTypeList.map((name)=>({
-                name,
-                type: 'bar',
-                barGap: '30%',
-                barCategoryGap: '30%',
-                barMaxWidth: 8,
-                ...winChartProps.showLabel && {
-                    label: {
-                        show: true,
-                        formatter: '{c}',
-                        position: 'right'
-                    }
-                },
-                data: winChartProps.data?.filter((item)=>item.type === name).map((item)=>({
-                        value: item.value,
-                        itemStyle: {
-                            borderRadius: [
-                                0,
-                                500,
-                                500,
-                                0
-                            ]
-                        }
-                    }))
-            }))
-    };
-};
-const getStackBarOpt = (winChartProps)=>{
-    const barTypeList = arrDeduplication(winChartProps.data?.map((item)=>item.type));
-    return {
-        grid: {
-            ...winChartProps.showStackTotal && {
-                right: 32
-            }
-        },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll',
-            data: barTypeList
-        },
-        xAxis: {},
-        yAxis: {
-            data: arrDeduplication(winChartProps.data?.map((item)=>item.label)),
-            axisTick: {
-                alignWithLabel: true
-            },
-            axisPointer: {
-                type: 'shadow'
-            },
-            min: winChartProps.yStart?.[0],
-            axisLabel: {
-                rotate: winChartProps.xAxisLabelRotate,
-                formatter: (name)=>{
-                    const configLength = winChartProps.xAxisLabelLength;
-                    if ('number' == typeof configLength && name.length > configLength) return `${name.slice(0, configLength)}...`;
-                    return name;
-                }
-            }
-        },
-        series: [
-            ...barTypeList.map((name)=>({
-                    name,
-                    type: 'bar',
-                    stack: 'total',
-                    barGap: '30%',
-                    barCategoryGap: '30%',
-                    barMaxWidth: 8,
-                    ...winChartProps.showLabel && !winChartProps.showStackTotal && {
-                        label: {
-                            show: true,
-                            formatter: '{c}',
-                            position: 'right'
-                        }
-                    },
-                    data: winChartProps.data?.filter((item)=>item.type === name).map((item)=>({
-                            value: item.value
-                        }))
-                })),
-            {
-                name: "\u603B\u548C",
-                type: 'bar',
-                stack: 'abc',
-                barGap: '-100%',
-                barMaxWidth: 8,
-                itemStyle: {
-                    normal: {
-                        color: 'transparent'
-                    }
-                },
-                tooltip: {
-                    show: false
-                },
-                ...winChartProps.showStackTotal && {
-                    label: {
-                        normal: {
-                            show: true,
-                            position: 'right',
-                            color: '#000'
-                        },
-                        formatter: (params)=>String(Number(arraySum(winChartProps.data?.filter((item)=>item.label === params.name).map((item)=>item.value)).toFixed(2)))
-                    }
-                },
-                data: aggregateStackData(winChartProps.data)
-            }
-        ]
-    };
-};
-const getRadarOpt = (winChartProps)=>{
-    const typeList = arrDeduplication(winChartProps.data?.map((item)=>winChartProps.reserveValueWithLabelType ? item.label : item.type));
-    return {
-        tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            bottom: 0,
-            type: 'scroll'
-        },
-        radar: {
-            shape: 'circle',
-            radius: '60%',
-            indicator: arrDeduplication(winChartProps.data?.map((item)=>winChartProps.reserveValueWithLabelType ? item.type : item.label)).map((name)=>({
-                    name
-                })),
-            axisName: {
-                color: '#5d677a'
-            },
-            splitArea: {
-                areaStyle: {
-                    color: [
-                        'transparent'
-                    ]
-                }
-            },
-            axisLine: {
-                lineStyle: {
-                    color: 'rgba(226, 229, 235, .3)'
-                }
-            },
-            splitLine: {
-                lineStyle: {
-                    color: '#e2e5eb',
-                    type: 'dashed',
-                    dashOffset: 1.5
-                }
-            }
-        },
-        series: [
-            {
-                type: 'radar',
-                data: typeList.map((name, index)=>({
-                        name,
-                        value: winChartProps.data?.filter((item)=>winChartProps.reserveValueWithLabelType ? item.label : item.type === name).map((item)=>item.value),
-                        areaStyle: {
-                            color: rgba(COLOR_LIST[index], 0.2)
-                        },
-                        label: {
-                            show: winChartProps.reserveValueWithLabelType,
-                            formatter: (params)=>params.value?.toString()
-                        }
-                    })),
-                emphasis: {
-                    lineStyle: {
-                        width: 4
-                    }
-                }
-            }
-        ]
-    };
-};
-const getEChartOptions = (originWinChartProps)=>{
-    const winChartProps = handleSort(originWinChartProps);
-    switch(winChartProps.chartType){
-        case types_WinChartType.MINI_AREA:
-            return getMiniAreaOpt(winChartProps);
-        case types_WinChartType.AREA:
-            return getAreaOpt(winChartProps);
-        case types_WinChartType.LINE:
-            return getLineOpt(winChartProps);
-        case types_WinChartType.COLUMN:
-            return getColumnOpt(winChartProps);
-        case types_WinChartType.STACK_COLUMN:
-            return getColumnStackOpt(winChartProps);
-        case types_WinChartType.BAR:
-            return getBarOpt(winChartProps);
-        case types_WinChartType.STACK_BAR:
-            return getStackBarOpt(winChartProps);
-        case types_WinChartType.FUNNEL:
-            return getFunnelOpt(winChartProps);
-        case types_WinChartType.DUAL_LINE_BAR:
-            return getDualOpt(winChartProps);
-        case types_WinChartType.STACK_DUAL_LINE_BAR:
-            return getStackDualOpt(winChartProps);
-        case types_WinChartType.PIE:
-            return getPieOpt(winChartProps);
-        case types_WinChartType.CYCLE:
-            return getPieCycleOpt(winChartProps);
-        case types_WinChartType.RADAR:
-            return getRadarOpt(winChartProps);
-        default:
-            return {};
-    }
-};
-var win_light_namespaceObject = JSON.parse('{"color":["#3379ff","#00dcf0","#ffc94d","#00db75","#b8b3ff","#40b4ff","#ffa101","#90abe0","#6ee67a","#6b84ff","#fa6b69"],"backgroundColor":"rgba(0,0,0,0)","textStyle":{},"title":{"textStyle":{"color":"#272f3d"},"subtextStyle":{"color":"#394252"}},"line":{"itemStyle":{"borderWidth":1},"lineStyle":{"width":2},"symbolSize":4,"symbol":"emptyCircle","smooth":false},"radar":{"itemStyle":{"borderWidth":1},"lineStyle":{"width":2},"symbolSize":4,"symbol":"emptyCircle","smooth":false},"bar":{"itemStyle":{"barBorderWidth":"0","barBorderColor":"#cccccc"}},"pie":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"scatter":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"boxplot":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"parallel":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"sankey":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"funnel":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"gauge":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"candlestick":{"itemStyle":{"color":"#f15451","color0":"#00c267","borderColor":"#f15451","borderColor0":"#00c267","borderWidth":1}},"graph":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"},"lineStyle":{"width":"1","color":"#dfe3eb"},"symbolSize":4,"symbol":"emptyCircle","smooth":false,"color":["#3379ff","#00dcf0","#ffc94d","#00db75","#b8b3ff","#40b4ff","#ffa101","#90abe0","#6ee67a","#6b84ff","#fa6b69"],"label":{"color":"#ffffff"}},"map":{"itemStyle":{"areaColor":"#eee","borderColor":"#444","borderWidth":0.5},"label":{"color":"#000"},"emphasis":{"itemStyle":{"areaColor":"rgba(255,215,0,0.8)","borderColor":"#444","borderWidth":1},"label":{"color":"rgb(100,0,0)"}}},"geo":{"itemStyle":{"areaColor":"#eee","borderColor":"#444","borderWidth":0.5},"label":{"color":"#000"},"emphasis":{"itemStyle":{"areaColor":"rgba(255,215,0,0.8)","borderColor":"#444","borderWidth":1},"label":{"color":"rgb(100,0,0)"}}},"categoryAxis":{"axisLine":{"show":true,"lineStyle":{"color":"#eef0f5"}},"axisTick":{"show":true,"lineStyle":{"color":"#eef0f5"}},"axisLabel":{"show":true,"color":"#828b9e"},"splitLine":{"show":false,"lineStyle":{"color":["#E0E6F1"]}},"splitArea":{"show":false,"areaStyle":{"color":["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"valueAxis":{"axisLine":{"show":false,"lineStyle":{"color":"#6E7079"}},"axisTick":{"show":false,"lineStyle":{"color":"#6E7079"}},"axisLabel":{"show":true,"color":"#828b9e"},"splitLine":{"show":true,"lineStyle":{"color":["#eef0f5"]}},"splitArea":{"show":false,"areaStyle":{"color":["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"logAxis":{"axisLine":{"show":false,"lineStyle":{"color":"#6E7079"}},"axisTick":{"show":false,"lineStyle":{"color":"#6E7079"}},"axisLabel":{"show":true,"color":"#828b9e"},"splitLine":{"show":true,"lineStyle":{"color":["#eef0f5"]}},"splitArea":{"show":false,"areaStyle":{"color":["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"timeAxis":{"axisLine":{"show":true,"lineStyle":{"color":"#eef0f5"}},"axisTick":{"show":true,"lineStyle":{"color":"#eef0f5"}},"axisLabel":{"show":true,"color":"#828b9e"},"splitLine":{"show":false,"lineStyle":{"color":["#E0E6F1"]}},"splitArea":{"show":false,"areaStyle":{"color":["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"toolbox":{"iconStyle":{"borderColor":"#828c9e"},"emphasis":{"iconStyle":{"borderColor":"#394252"}}},"legend":{"textStyle":{"color":"#828b9e"}},"tooltip":{"axisPointer":{"lineStyle":{"color":"#ccd1db","width":"1"},"crossStyle":{"color":"#ccd1db","width":"1"}}},"timeline":{"lineStyle":{"color":"#eef0f5","width":2},"itemStyle":{"color":"#eef0f5","borderWidth":"1"},"controlStyle":{"color":"#828c9e","borderColor":"#828c9e","borderWidth":1},"checkpointStyle":{"color":"#3379ff","borderColor":"#ffffff"},"label":{"color":"#b1b9c7"},"emphasis":{"itemStyle":{"color":"#3379ff"},"controlStyle":{"color":"#828c9e","borderColor":"#828c9e","borderWidth":1},"label":{"color":"#b1b9c7"}}},"visualMap":{"color":["#062379","#2058d2","#3379ff","#a0cbff","#e8f4ff"]},"dataZoom":{"handleSize":"undefined%","textStyle":{}},"markPoint":{"label":{"color":"#ffffff"},"emphasis":{"label":{"color":"#ffffff"}}}}');
-var win_dark_namespaceObject = JSON.parse('{"color":["#5798ff","#00dcf0","#ffc94d","#00db75","#b8b3ff","#40b4ff","#ffa101","#90abe0","#6ee67a","#6b84ff","#fa6b69"],"backgroundColor":"transparent","textStyle":{},"title":{"textStyle":{"color":"#ffffff"},"subtextStyle":{"color":"#ffffff"}},"line":{"itemStyle":{"borderWidth":"1"},"lineStyle":{"width":"2"},"symbolSize":"6","symbol":"emptyCircle","smooth":true},"radar":{"itemStyle":{"borderWidth":"1"},"lineStyle":{"width":"2"},"symbolSize":"6","symbol":"emptyCircle","smooth":true},"bar":{"itemStyle":{"barBorderWidth":"0","barBorderColor":"#cccccc"}},"pie":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"scatter":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"boxplot":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"parallel":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"sankey":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"funnel":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"gauge":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"}},"candlestick":{"itemStyle":{"color":"#f15451","color0":"#00c267","borderColor":"#f15451","borderColor0":"#00c267","borderWidth":1}},"graph":{"itemStyle":{"borderWidth":"0","borderColor":"#cccccc"},"lineStyle":{"width":"1","color":"#ffffff"},"symbolSize":"6","symbol":"emptyCircle","smooth":true,"color":["#5798ff","#00dcf0","#ffc94d","#00db75","#b8b3ff","#40b4ff","#ffa101","#90abe0","#6ee67a","#6b84ff","#fa6b69"],"label":{"color":"#ffffff"}},"map":{"itemStyle":{"areaColor":"#eee","borderColor":"#444","borderWidth":0.5},"label":{"color":"#000"},"emphasis":{"itemStyle":{"areaColor":"rgba(255,215,0,0.8)","borderColor":"#444","borderWidth":1},"label":{"color":"rgb(100,0,0)"}}},"geo":{"itemStyle":{"areaColor":"#eee","borderColor":"#444","borderWidth":0.5},"label":{"color":"#000"},"emphasis":{"itemStyle":{"areaColor":"rgba(255,215,0,0.8)","borderColor":"#444","borderWidth":1},"label":{"color":"rgb(100,0,0)"}}},"categoryAxis":{"axisLine":{"show":true,"lineStyle":{"color":"rgba(255,255,255,0.12)"}},"axisTick":{"show":true,"lineStyle":{"color":"rgba(255,255,255,0.12)"}},"axisLabel":{"show":true,"color":"rgba(255,255,255,0.5)"},"splitLine":{"show":false,"lineStyle":{"color":["#E0E6F1"]}},"splitArea":{"show":false,"areaStyle":{"color":["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"valueAxis":{"axisLine":{"show":false,"lineStyle":{"color":"#6E7079"}},"axisTick":{"show":false,"lineStyle":{"color":"#6E7079"}},"axisLabel":{"show":true,"color":"rgba(255,255,255,0.5)"},"splitLine":{"show":true,"lineStyle":{"color":["rgba(255,255,255,0.12)"]}},"splitArea":{"show":false,"areaStyle":{"color":["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"logAxis":{"axisLine":{"show":false,"lineStyle":{"color":"#6E7079"}},"axisTick":{"show":false,"lineStyle":{"color":"#6E7079"}},"axisLabel":{"show":true,"color":"rgba(255,255,255,0.5)"},"splitLine":{"show":true,"lineStyle":{"color":["rgba(255,255,255,0.12)"]}},"splitArea":{"show":false,"areaStyle":{"color":["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"timeAxis":{"axisLine":{"show":true,"lineStyle":{"color":"rgba(255,255,255,0.12)"}},"axisTick":{"show":true,"lineStyle":{"color":"rgba(255,255,255,0.12)"}},"axisLabel":{"show":true,"color":"rgba(255,255,255,0.5)"},"splitLine":{"show":false,"lineStyle":{"color":["#E0E6F1"]}},"splitArea":{"show":false,"areaStyle":{"color":["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},"toolbox":{"iconStyle":{"borderColor":"#ffffff"},"emphasis":{"iconStyle":{"borderColor":"#ffffff"}}},"legend":{"textStyle":{"color":"#ffffff"}},"tooltip":{"axisPointer":{"lineStyle":{"color":"#ffffff","width":"1"},"crossStyle":{"color":"#ffffff","width":"1"}}},"timeline":{"lineStyle":{"color":"#ffffff","width":2},"itemStyle":{"color":"#ffffff","borderWidth":"1"},"controlStyle":{"color":"#ffffff","borderColor":"#ffffff","borderWidth":1},"checkpointStyle":{"color":"#5798ff","borderColor":"#ffffff"},"label":{"color":"#ffffff"},"emphasis":{"itemStyle":{"color":"#5798ff"},"controlStyle":{"color":"#ffffff","borderColor":"#ffffff","borderWidth":1},"label":{"color":"#ffffff"}}},"visualMap":{"color":["#062379","#2058d2","#3379ff","#a0cbff","#e8f4ff"]},"dataZoom":{"handleSize":"undefined%","textStyle":{}},"markPoint":{"label":{"color":"#ffffff"},"emphasis":{"label":{"color":"#ffffff"}}}}');
-__WEBPACK_EXTERNAL_MODULE_echarts__.registerTheme('light', deepmerge(win_light_namespaceObject, commonOpt));
-__WEBPACK_EXTERNAL_MODULE_echarts__.registerTheme('dark', deepmerge(win_dark_namespaceObject, commonOpt));
-const mergeOption = {
-    arrayMerge: (_destinationArray, sourceArray)=>sourceArray
-};
-const WinChart = (props)=>{
-    const boxRef = useRef(null);
-    const [instance, setInstance] = useState();
-    useEffect(()=>{
-        const chart = __WEBPACK_EXTERNAL_MODULE_echarts__.init(boxRef.current, props.theme ?? 'light');
-        setInstance(chart);
-        const resize = debounce(chart.resize, 500);
-        const handlerResize = ()=>resize();
-        globalThis.addEventListener('resize', handlerResize);
-        return ()=>{
-            globalThis.removeEventListener('resize', handlerResize);
-        };
-    }, [
-        props.theme
-    ]);
-    useEffect(()=>{
-        if (instance) {
-            const actualChartHeight = instance.getHeight() - 48;
-            const newProps = {
-                ...props,
-                ...props.chartType === types_WinChartType.CYCLE && !props.cycleCenterConfig && {
-                    cycleCenterConfig: {
-                        title: {
-                            top: actualChartHeight / 2 + 24
-                        },
-                        content: {
-                            top: actualChartHeight / 2 - 8
-                        }
-                    }
-                }
-            };
-            const { extraOption = {}, extraSeriesOption } = newProps;
-            instance.clear();
-            const option = deepmerge(mergeSeriesOption(getEChartOptions(newProps), extraSeriesOption), extraOption, mergeOption);
-            instance.setOption(option);
-            newProps.onLoad?.(instance);
-            const timer = setTimeout(()=>{
-                instance.resize();
-            }, 500);
-            return ()=>{
-                clearTimeout(timer);
-            };
-        }
-    }, [
-        instance,
-        props
-    ]);
-    return /*#__PURE__*/ jsx(ChartWrapper, {
-        ref: boxRef,
-        className: props.className,
-        style: props.style
-    });
-};
-const mockPointsData = [];
-for(let i = 0; i < 50; i++)mockPointsData.push({
-    name: `\u{6D4B}\u{8BD5}${i + 1}`,
-    value: [
-        150 * Math.random(),
-        50 * Math.random()
-    ],
-    symbolSize: 8
-});
-const mockLinesData = [];
-for(let i = 0; i < 10; i++)mockLinesData.push([
-    [
-        150 * Math.random(),
-        50 * Math.random()
-    ],
-    [
-        150 * Math.random(),
-        50 * Math.random()
-    ]
-]);
-const EarthChart = ({ className = '', style = {}, extraOption = {}, lineStyles = {}, pointsStyles = {}, pointsData = [], linesData = [], globeOption = {} })=>{
-    const boxRef = useRef(null);
-    const [eChart, setEChart] = useState();
-    useEffect(()=>{
-        const eChart = __WEBPACK_EXTERNAL_MODULE_echarts__.init(boxRef.current);
-        setEChart(eChart);
-        const resize = debounce(eChart.resize, 500);
-        const handlerResize = ()=>{
-            resize();
-        };
-        globalThis.addEventListener('resize', handlerResize);
-        return ()=>{
-            globalThis.removeEventListener('resize', handlerResize);
-        };
-    }, []);
-    useEffect(()=>{
-        if (eChart) {
-            const series = [];
-            series.push({
-                type: 'lines3D',
-                name: "lines3D",
-                effect: {
-                    show: true,
-                    trailWidth: 2,
-                    trailLength: 0.15,
-                    trailOpacity: 1,
-                    trailColor: 'rgb(30, 30, 60)'
-                },
-                lineStyle: {
-                    width: 5,
-                    color: 'rgb(50, 50, 150)',
-                    opacity: 0.3
-                },
-                blendMode: 'lighter',
-                data: linesData,
-                ...lineStyles
-            });
-            series.push({
-                type: 'scatter3D',
-                coordinateSystem: 'globe',
-                zlevel: 3,
-                rippleEffect: {
-                    brushType: 'stroke'
-                },
-                label: {
-                    fontSize: 8,
-                    show: true,
-                    position: 'right',
-                    formatter: '{b}'
-                },
-                itemStyle: {
-                    normal: {
-                        color: '#f5f802'
-                    }
-                },
-                data: pointsData,
-                ...pointsStyles
-            });
-            eChart.setOption({
-                backgroundColor: '#000',
-                baseColor: '#000',
-                shading: 'realistic',
-                globe: {
-                    environment: 'https://img.alicdn.com/imgextra/i2/O1CN017x8UE61p6wqej1Y0c_!!6000000005312-0-tps-2048-1024.jpg',
-                    heightTexture: 'https://img.alicdn.com/imgextra/i2/O1CN01BB16kM1ILFttfdYZg_!!6000000000876-0-tps-4096-2048.jpg',
-                    baseTexture: 'https://img.alicdn.com/imgextra/i4/O1CN01fs70Dq25ElSd8mU6C_!!6000000007495-0-tps-5400-2700.jpg',
-                    shading: 'lambert',
-                    light: {
-                        ambient: {
-                            intensity: 1
-                        },
-                        main: {
-                            intensity: 0.1
-                        }
-                    },
-                    viewControl: {
-                        autoRotate: true,
-                        distance: 230
-                    },
-                    left: '20%',
-                    ...globeOption
-                },
-                series: series,
-                ...extraOption
-            });
-            const timer = setTimeout(()=>{
-                eChart.resize();
-            }, 500);
-            return ()=>{
-                clearTimeout(timer);
-            };
-        }
-    }, [
-        eChart,
-        extraOption,
-        globeOption,
-        lineStyles,
-        linesData,
-        pointsData,
-        pointsStyles
-    ]);
-    return /*#__PURE__*/ jsx(ChartWrapper, {
-        ref: boxRef,
-        className: className,
-        style: style
-    });
-};
-const src = WinChart;
-var __webpack_exports__IChartInfo = types_namespaceObject.IChartInfo;
-var __webpack_exports__IWinChartProps = types_namespaceObject.IWinChartProps;
-export { EarthChart, WinChart, types_WinChartType as WinChartType, src as default, __WEBPACK_EXTERNAL_MODULE_echarts__ as echarts, __webpack_exports__IChartInfo as IChartInfo, __webpack_exports__IWinChartProps as IWinChartProps };