win-chart 2.13.0 → 3.0.0

package/dist/esm/utils/getAreaSpec.js

@@ -0,0 +1,106 @@
+import { COLOR_LIST } from "./const.js";
+import { getDataTypes, getGradientColor, getMainAxisLabels, getSeriesDataByType, getSeriesLabelConfig, getXAxisOpt } from "./tool.js";
+const getMiniAreaOpt = (winChartProps)=>{
+    const areaTypeList = getDataTypes(winChartProps);
+    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: getMainAxisLabels(winChartProps)
+        },
+        yAxis: {
+            show: false,
+            min: winChartProps.yStart?.at(0)
+        },
+        series: [
+            ...areaTypeList.map((type, index)=>{
+                const areaColor = color?.[index] ?? COLOR_LIST[index];
+                return {
+                    name: type,
+                    type: 'line',
+                    smooth: true,
+                    lineStyle: {
+                        width: 2
+                    },
+                    showSymbol: false,
+                    areaStyle: {
+                        opacity: 0.8,
+                        color: getGradientColor(winChartProps, areaColor)
+                    },
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    label: getSeriesLabelConfig(winChartProps),
+                    data: getSeriesDataByType(winChartProps, type)
+                };
+            })
+        ]
+    };
+};
+const getAreaOpt = (winChartProps)=>{
+    const areaTypeList = getDataTypes(winChartProps);
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#999'
+                }
+            }
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        xAxis: getXAxisOpt(winChartProps),
+        yAxis: {
+            min: winChartProps.yStart?.at(0)
+        },
+        series: [
+            ...areaTypeList.map((type, index)=>{
+                const areaColor = COLOR_LIST[index];
+                return {
+                    name: type,
+                    type: 'line',
+                    smooth: true,
+                    lineStyle: {
+                        width: 2
+                    },
+                    areaStyle: {
+                        opacity: 0.8,
+                        color: getGradientColor(winChartProps, areaColor)
+                    },
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    showSymbol: winChartProps.showLabel,
+                    label: getSeriesLabelConfig(winChartProps),
+                    data: getSeriesDataByType(winChartProps, type)
+                };
+            })
+        ]
+    };
+};
+export { getAreaOpt, getMiniAreaOpt };

package/dist/esm/utils/getBarSpec.js

@@ -0,0 +1,134 @@
+import { aggregateStackData, arraySum, getDataTypes, getMainAxisLabels, getSeriesDataByType, getSeriesLabelConfig, handleMainAxisLabel } from "./tool.js";
+const getBarOpt = (winChartProps)=>({
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#999'
+                }
+            }
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        xAxis: {},
+        yAxis: {
+            data: getMainAxisLabels(winChartProps),
+            axisTick: {
+                alignWithLabel: true
+            },
+            axisPointer: {
+                type: 'shadow'
+            },
+            min: winChartProps.yStart?.[0],
+            axisLabel: {
+                rotate: winChartProps.xAxisLabelRotate,
+                formatter: (name)=>handleMainAxisLabel(winChartProps, name)
+            }
+        },
+        series: getDataTypes(winChartProps).map((type)=>({
+                name: type,
+                type: 'bar',
+                barGap: '30%',
+                barCategoryGap: '30%',
+                barMaxWidth: 8,
+                label: {
+                    ...getSeriesLabelConfig(winChartProps),
+                    position: 'right'
+                },
+                data: getSeriesDataByType(winChartProps, type).map((item)=>({
+                        value: item,
+                        itemStyle: {
+                            borderRadius: [
+                                0,
+                                500,
+                                500,
+                                0
+                            ]
+                        }
+                    }))
+            }))
+    });
+const getStackBarOpt = (winChartProps)=>{
+    const barTypeList = getDataTypes(winChartProps);
+    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: getMainAxisLabels(winChartProps),
+            axisTick: {
+                alignWithLabel: true
+            },
+            axisPointer: {
+                type: 'shadow'
+            },
+            min: winChartProps.yStart?.[0],
+            axisLabel: {
+                rotate: winChartProps.xAxisLabelRotate,
+                formatter: (name)=>handleMainAxisLabel(winChartProps, name)
+            }
+        },
+        series: [
+            ...barTypeList.map((type)=>({
+                    name: type,
+                    type: 'bar',
+                    stack: 'total',
+                    barGap: '30%',
+                    barCategoryGap: '30%',
+                    barMaxWidth: 8,
+                    label: {
+                        ...getSeriesLabelConfig(winChartProps),
+                        show: winChartProps.showLabel && !winChartProps.showStackTotal,
+                        position: 'right'
+                    },
+                    data: getSeriesDataByType(winChartProps, type)
+                })),
+            {
+                name: '总和',
+                type: 'bar',
+                stack: 'abc',
+                barGap: '-100%',
+                barMaxWidth: 8,
+                itemStyle: {
+                    normal: {
+                        color: 'transparent'
+                    }
+                },
+                tooltip: {
+                    show: false
+                },
+                label: {
+                    show: winChartProps.showStackTotal,
+                    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 ?? [])
+            }
+        ]
+    };
+};
+export { getBarOpt, getStackBarOpt };

package/dist/esm/utils/getChartOptions.js

@@ -0,0 +1,44 @@
+import { WinChartType } from "../types/index.js";
+import { getAreaOpt, getMiniAreaOpt } from "./getAreaSpec.js";
+import { getDualOpt, getStackDualOpt } from "./getDualSpec.js";
+import { getPieCycleOpt, getPieOpt } from "./getPieSpec.js";
+import { getLineOpt } from "./getLineSpec.js";
+import { getColumnOpt, getColumnStackOpt } from "./getColumnSpec.js";
+import { getFunnelOpt } from "./getFunnelSpec.js";
+import { getBarOpt, getStackBarOpt } from "./getBarSpec.js";
+import { handleSort } from "./tool.js";
+import { getRadarOpt } from "./getRadarSpec.js";
+const getEChartOptions = (originWinChartProps)=>{
+    const winChartProps = handleSort(originWinChartProps);
+    switch(winChartProps.chartType){
+        case WinChartType.MINI_AREA:
+            return getMiniAreaOpt(winChartProps);
+        case WinChartType.AREA:
+            return getAreaOpt(winChartProps);
+        case WinChartType.LINE:
+            return getLineOpt(winChartProps);
+        case WinChartType.COLUMN:
+            return getColumnOpt(winChartProps);
+        case WinChartType.STACK_COLUMN:
+            return getColumnStackOpt(winChartProps);
+        case WinChartType.BAR:
+            return getBarOpt(winChartProps);
+        case WinChartType.STACK_BAR:
+            return getStackBarOpt(winChartProps);
+        case WinChartType.FUNNEL:
+            return getFunnelOpt(winChartProps);
+        case WinChartType.DUAL_LINE_BAR:
+            return getDualOpt(winChartProps);
+        case WinChartType.STACK_DUAL_LINE_BAR:
+            return getStackDualOpt(winChartProps);
+        case WinChartType.PIE:
+            return getPieOpt(winChartProps);
+        case WinChartType.CYCLE:
+            return getPieCycleOpt(winChartProps);
+        case WinChartType.RADAR:
+            return getRadarOpt(winChartProps);
+        default:
+            return {};
+    }
+};
+export { getEChartOptions };

package/dist/esm/utils/getColumnSpec.js

@@ -0,0 +1,90 @@
+import { getDataTypes, getSeriesDataByType, getSeriesLabelConfig, getXAxisOpt } from "./tool.js";
+const getColumnOpt = (winChartProps)=>{
+    const barTypeList = getDataTypes(winChartProps);
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#999'
+                }
+            }
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        xAxis: {
+            ...getXAxisOpt(winChartProps),
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        yAxis: {
+            min: winChartProps.yStart?.[0]
+        },
+        series: barTypeList.map((type)=>({
+                name: type,
+                type: 'bar',
+                barGap: '30%',
+                barCategoryGap: '30%',
+                barMaxWidth: 8,
+                label: getSeriesLabelConfig(winChartProps),
+                data: getSeriesDataByType(winChartProps, type).map((item)=>({
+                        value: item,
+                        itemStyle: {
+                            borderRadius: item > 0 ? [
+                                500,
+                                500,
+                                0,
+                                0
+                            ] : [
+                                0,
+                                0,
+                                500,
+                                500
+                            ]
+                        }
+                    }))
+            }))
+    };
+};
+const getColumnStackOpt = (winChartProps)=>{
+    const barTypeList = getDataTypes(winChartProps);
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#999'
+                }
+            }
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        xAxis: {
+            ...getXAxisOpt(winChartProps),
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        yAxis: {
+            min: winChartProps.yStart?.[0]
+        },
+        series: barTypeList.map((name)=>({
+                name,
+                type: 'bar',
+                stack: 'total',
+                barGap: '30%',
+                barCategoryGap: '30%',
+                barMaxWidth: 8,
+                label: getSeriesLabelConfig(winChartProps),
+                data: getSeriesDataByType(winChartProps, name)
+            }))
+    };
+};
+export { getColumnOpt, getColumnStackOpt };

package/dist/esm/utils/getDualSpec.js

@@ -0,0 +1,134 @@
+import { getDataTypes, getExtraDataTypes, getSeriesDataByType, getSeriesLabelConfig, getXAxisOpt } from "./tool.js";
+const getDualOpt = (winChartProps)=>{
+    const barTypeList = getDataTypes(winChartProps);
+    const lineTypeList = getExtraDataTypes(winChartProps);
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                    color: '#999'
+                },
+                label: {
+                    backgroundColor: '#999'
+                }
+            }
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        xAxis: {
+            ...getXAxisOpt(winChartProps),
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        yAxis: [
+            {
+                alignTicks: true,
+                min: winChartProps.yStart?.[0]
+            },
+            {
+                alignTicks: true,
+                min: winChartProps.yStart?.[1]
+            }
+        ],
+        series: [
+            ...barTypeList.map((type)=>({
+                    name: type,
+                    type: 'bar',
+                    barGap: '30%',
+                    barCategoryGap: '30%',
+                    barMaxWidth: 8,
+                    label: getSeriesLabelConfig(winChartProps),
+                    data: getSeriesDataByType(winChartProps, type).map((item)=>({
+                            value: item,
+                            itemStyle: {
+                                borderRadius: item > 0 ? [
+                                    500,
+                                    500,
+                                    0,
+                                    0
+                                ] : [
+                                    0,
+                                    0,
+                                    500,
+                                    500
+                                ]
+                            }
+                        }))
+                })),
+            ...lineTypeList.map((type)=>({
+                    name: type,
+                    type: 'line',
+                    smooth: true,
+                    yAxisIndex: 1,
+                    showSymbol: false,
+                    label: getSeriesLabelConfig(winChartProps),
+                    data: getSeriesDataByType(winChartProps, type)
+                }))
+        ]
+    };
+};
+const getStackDualOpt = (winChartProps)=>{
+    const barTypeList = getDataTypes(winChartProps);
+    const lineTypeList = getExtraDataTypes(winChartProps);
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                    color: '#999'
+                },
+                label: {
+                    backgroundColor: '#999'
+                }
+            }
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        xAxis: {
+            ...getXAxisOpt(winChartProps),
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        yAxis: [
+            {
+                alignTicks: true,
+                min: winChartProps.yStart?.[0]
+            },
+            {
+                alignTicks: true,
+                min: winChartProps.yStart?.[1]
+            }
+        ],
+        series: [
+            ...barTypeList.map((type)=>({
+                    name: type,
+                    type: 'bar',
+                    stack: 'total',
+                    barGap: '30%',
+                    barCategoryGap: '30%',
+                    barMaxWidth: 8,
+                    label: getSeriesLabelConfig(winChartProps),
+                    data: getSeriesDataByType(winChartProps, type)
+                })),
+            ...lineTypeList.map((type)=>({
+                    name: type,
+                    type: 'line',
+                    smooth: true,
+                    yAxisIndex: 1,
+                    showSymbol: false,
+                    label: getSeriesLabelConfig(winChartProps),
+                    data: getSeriesDataByType(winChartProps, type)
+                }))
+        ]
+    };
+};
+export { getDualOpt, getStackDualOpt };

package/dist/esm/utils/getFunnelSpec.js

@@ -0,0 +1,55 @@
+import { dataDescOrder, handleToPercent } from "./tool.js";
+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);
+                    }
+                }
+            }
+        ]
+    };
+};
+export { getFunnelOpt };

package/dist/esm/utils/getLineSpec.js

@@ -0,0 +1,38 @@
+import { getDataTypes, getSeriesDataByType, getSeriesLabelConfig, getXAxisOpt } from "./tool.js";
+const getLineOpt = (winChartProps)=>{
+    const typeList = getDataTypes(winChartProps);
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#999'
+                }
+            }
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        xAxis: getXAxisOpt(winChartProps),
+        yAxis: {
+            min: winChartProps.yStart?.[0]
+        },
+        series: typeList.map((type)=>({
+                name: type,
+                type: 'line',
+                smooth: false,
+                lineStyle: {
+                    width: 2
+                },
+                showSymbol: true,
+                emphasis: {
+                    focus: 'series'
+                },
+                label: getSeriesLabelConfig(winChartProps),
+                data: getSeriesDataByType(winChartProps, type)
+            }))
+    };
+};
+export { getLineOpt };