win-chart 2.13.0 → 3.0.0

package/dist/esm/utils/getPieSpec.js

@@ -0,0 +1,103 @@
+import { arraySum, dataDescOrder, getLabelColor, handleToPercent } from "./tool.js";
+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 ?? '总计',
+                    fill: 'dark' === winChartProps.theme ? '#fff' : '#394252 ',
+                    fontSize: winChartProps.cycleCenterConfig?.title?.fontSize ?? 14
+                }
+            }
+        ]
+    };
+};
+export { getPieCycleOpt, getPieOpt };

package/dist/esm/utils/getRadarSpec.js

@@ -0,0 +1,66 @@
+import { rgba } from "polished";
+import { COLOR_LIST } from "./const.js";
+import { arrDeduplication } from "./tool.js";
+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
+                    }
+                }
+            }
+        ]
+    };
+};
+export { getRadarOpt };

package/dist/esm/utils/tool.js

@@ -0,0 +1,146 @@
+import { graphic } from "echarts";
+import { rgba } from "polished";
+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 getMainAxisLabels = (winChartProps)=>{
+    const data = [
+        ...winChartProps.data ?? [],
+        ...winChartProps.extraData ?? []
+    ];
+    return arrDeduplication(data.map((item)=>item.label));
+};
+const getDataTypes = (winChartProps)=>arrDeduplication(winChartProps.data?.filter((item)=>!!item.type).map((item)=>item.type)) ?? [];
+const getExtraDataTypes = (winChartProps)=>arrDeduplication(winChartProps.extraData?.filter((item)=>!!item.type).map((item)=>item.type)) ?? [];
+const getSeriesDataByType = (winChartProps, type)=>{
+    const data = [
+        ...winChartProps.data ?? [],
+        ...winChartProps.extraData ?? []
+    ];
+    return getMainAxisLabels(winChartProps).map((label)=>data.find((item)=>item.type === type && item.label === label)?.value ?? 0);
+};
+const getSeriesLabelConfig = (winChartProps)=>winChartProps.showLabel ? {
+        show: true,
+        formatter: '{c}',
+        position: 'top',
+        showSymbol: true
+    } : {
+        show: false
+    };
+const handleMainAxisLabel = (winChartProps, name)=>{
+    const configLength = winChartProps.xAxisLabelLength;
+    if ('number' == typeof configLength && name.length > configLength) return `${name.slice(0, configLength)}...`;
+    return name;
+};
+const getXAxisOpt = (winChartProps)=>({
+        boundaryGap: true,
+        axisTick: {
+            alignWithLabel: true
+        },
+        data: getMainAxisLabels(winChartProps),
+        axisLabel: {
+            rotate: winChartProps.xAxisLabelRotate,
+            formatter: (name)=>handleMainAxisLabel(winChartProps, name)
+        }
+    });
+const getGradientColor = (winChartProps, color)=>{
+    const gradientColor = new graphic.LinearGradient(0, 0, 0, 1, [
+        {
+            offset: 0,
+            color: rgba(color, 0.5)
+        },
+        {
+            offset: 1,
+            color: 'dark' === winChartProps.theme ? rgba('gray', 0.1) : '#fff'
+        }
+    ]);
+    return gradientColor;
+};
+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;
+}
+export { aggregateStackData, arrDeduplication, arraySum, checkEntityArr, dataDescOrder, debounce, getDataTypes, getExtraDataTypes, getGradientColor, getLabelColor, getMainAxisLabels, getSeriesDataByType, getSeriesLabelConfig, getXAxisOpt, handleMainAxisLabel, handleSort, handleToPercent, isNonEmptyArray, mergeSeriesOption, sortArray, sortArrayByLabel };