win-chart 2.13.0 → 3.0.0

package/dist/index.js

@@ -0,0 +1,1219 @@
+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 };