win-chart 1.0.0

package/src/components/win-chart/utils/getColumnSpec.ts

@@ -0,0 +1,112 @@
+import { IWinChartProps } from './type';
+import { arrDeduplication, getAxisOpt } from './tool';
+import * as echarts from 'echarts';
+
+/**
+ * 柱状图
+ * @param winChartProps
+ * @returns
+ */
+export const getColumnOpt = (
+  winChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  const barTypeList = arrDeduplication<string>(
+    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) => {
+      return {
+        name,
+        type: 'bar',
+        barGap: '30%',
+        barCategoryGap: '30%',
+        barMaxWidth: 8,
+        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],
+            },
+          })),
+      };
+    }),
+  };
+};
+
+/**
+ * 堆叠柱状图
+ * @param winChartProps
+ * @returns
+ */
+export const getColumnStackOpt = (
+  winChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  const barTypeList = arrDeduplication<string>(
+    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) => {
+      return {
+        name,
+        type: 'bar',
+        stack: 'total',
+        barGap: '30%',
+        barCategoryGap: '30%',
+        barMaxWidth: 8,
+        data: winChartProps.data
+          ?.filter((item) => item.type === name)
+          .map((item) => ({
+            value: item.value,
+          })),
+      };
+    }),
+  };
+};

package/src/components/win-chart/utils/getDualSpec.ts

@@ -0,0 +1,79 @@
+import { IWinChartProps } from './type';
+import { arrDeduplication, getAxisOpt } from './tool';
+
+/**
+ * 双轴图（分组柱状 折线）
+ * @param winChartProps
+ * @returns
+ */
+export const getDualOpt = (
+  winChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  const barTypeList = arrDeduplication<string>(
+    winChartProps.data?.map((item) => item.type!),
+  );
+
+  const lineTypeList = arrDeduplication<string>(
+    winChartProps.extraData?.map((item) => item.type!),
+  );
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#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' as any,
+        barGap: '30%',
+        barCategoryGap: '30%',
+        barMaxWidth: 8,
+        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' as any,
+        smooth: true,
+        yAxisIndex: 1,
+        showSymbol: false,
+        data: winChartProps.extraData
+          ?.filter((item) => item.type === name)
+          .map((item) => item.value),
+      })),
+    ],
+  };
+};

package/src/components/win-chart/utils/getFunnelSpec.ts

@@ -0,0 +1,70 @@
+import { dataDescOrder, handleToPercent } from './tool';
+import { IWinChartProps } from './type';
+import * as echarts from 'echarts';
+
+/**
+ * 漏斗图
+ * @param winChartProps
+ * @returns
+ */
+export const getFunnelOpt = (
+  winChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  const data =
+    dataDescOrder(winChartProps.data)?.map((item) => ({
+      value: item.value ?? 0,
+      name: item.type,
+    })) ?? [];
+
+  const seriesConfig: echarts.FunnelSeriesOption = {
+    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 (currentIndex === 0) {
+              return '100%';
+            }
+            const prevValue = data[currentIndex - 1].value;
+
+            return handleToPercent((params.value as number) / prevValue);
+          },
+        },
+      },
+    ],
+  };
+};

package/src/components/win-chart/utils/getLineSpec.ts

@@ -0,0 +1,53 @@
+import { IWinChartProps } from './type';
+import { arrDeduplication, getAxisOpt } from './tool';
+import * as echarts from 'echarts';
+
+/**
+ * 折线图
+ * @param winChartProps
+ * @returns
+ */
+export const getLineOpt = (
+  winChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  const typeList = arrDeduplication<string>(
+    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) => {
+      return {
+        name,
+        type: 'line',
+        smooth: false,
+        lineStyle: {
+          width: 2,
+        },
+        showSymbol: true,
+        emphasis: {
+          focus: 'series',
+        },
+        data: winChartProps.data
+          ?.filter((item) => item.type === name)
+          .map((item) => item.value),
+      };
+    }),
+  };
+};

package/src/components/win-chart/utils/getPieSpec.ts

@@ -0,0 +1,124 @@
+import { arraySum, dataDescOrder, handleToPercent } from './tool';
+import { ICharInfo, IWinChartProps } from './type';
+
+/**
+ * 饼图
+ * @param winChartProps
+ * @returns
+ */
+export const getPieOpt = (
+  winChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  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: 'rgba(0, 0, 0, 0.7)', // 字体颜色
+          position: 'outside', // 标签位置，可选项有 'inside'、'outside'、'center' 等
+          formatter: (data: any) => {
+            return handleToPercent(data.value / total);
+          },
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+  };
+};
+
+/**
+ * 环图
+ * @param winChartProps
+ * @returns
+ */
+export const getPieCycleOpt = (
+  winChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  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)?.map((item) => ({
+          value: item.value,
+          name: item.type,
+        })),
+        label: {
+          show: true,
+          fontSize: 12, // 字体大小
+          color: 'rgba(0, 0, 0, 0.7)', // 字体颜色
+          position: 'outside', // 标签位置，可选项有 'inside'、'outside'、'center' 等
+          formatter: (data: any) => {
+            return handleToPercent(data.value / total);
+          },
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: 76,
+        style: {
+          text: Number(total.toFixed(2)).toString(),
+          fill: 'rgba(0, 0, 0, .7)', // 文字颜色
+          fontSize: 28, // 文字大小
+          fontWeight: 'bold', // 文字粗细
+        },
+      },
+      {
+        type: 'text',
+        left: 'center',
+        top: 112,
+        style: {
+          text: '总计',
+          fill: '#828B9E', // 文字颜色
+          fontSize: 12, // 文字大小
+          fontWeight: 'bold', // 文字粗细
+        },
+      },
+    ],
+  };
+};

package/src/components/win-chart/utils/getRadarSpec.ts

@@ -0,0 +1,87 @@
+import { rgba } from 'polished';
+import { COLOR_LIST } from './const';
+import { arrDeduplication } from './tool';
+import { IWinChartProps } from './type';
+
+/**
+ * 雷达图
+ * @param winChartProps
+ * @returns
+ */
+export const getRadarOpt = (
+  winChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  const typeList = arrDeduplication<string>(
+    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) => {
+              return params.value?.toString();
+            },
+          },
+        })),
+        emphasis: {
+          lineStyle: {
+            width: 4,
+          },
+        },
+      },
+    ],
+  };
+};

package/src/components/win-chart/utils/tool.ts

@@ -0,0 +1,163 @@
+import { ICharInfo, IWinChartProps } from './type';
+
+/**
+ * 数据转百分比
+ * @param value
+ * @param num
+ */
+export const handleToPercent = (value: unknown, num = 2) =>
+  typeof value === 'number' ? `${Number((value * 100).toFixed(num))}%` : '-%';
+
+/**
+ * 数组去重
+ * @param data
+ * @returns
+ */
+export function arrDeduplication<T>(data?: T[]) {
+  if (Array.isArray(data)) {
+    return [...new Set(data)];
+  }
+
+  return [];
+}
+
+/**
+ * 数组求和
+ * @param list
+ */
+export const arraySum = (list?: number[]) => {
+  if (Array.isArray(list) && list.length !== 0) {
+    return list.reduce((a, b) => {
+      const temp = Number(b);
+      return a + (!Object.is(temp, NaN) ? temp : 0);
+    }, 0);
+  }
+  return 0;
+};
+
+/**
+ * 判断是否为一个有效数组（有值，并且长度大于 0）
+ * @param data
+ * @returns
+ */
+export const checkEntityArr = (data: unknown) =>
+  Array.isArray(data) && data.length > 0;
+
+/**
+ * 处理数据降序
+ * @param data
+ * @returns
+ */
+export const dataDescOrder = (data?: ICharInfo[]) => {
+  if (Array.isArray(data)) {
+    return data.sort((a, b) => b.value - a.value);
+  }
+
+  return data;
+};
+
+/**
+ * 获取 X 轴配置
+ * @param winChartProps
+ * @returns
+ */
+export const getAxisOpt = (
+  winChartProps: IWinChartProps,
+): echarts.XAXisComponentOption => {
+  return {
+    boundaryGap: true,
+    axisTick: {
+      alignWithLabel: true,
+    },
+    data: arrDeduplication(winChartProps.data?.map((item) => item.label)),
+    axisLabel: {
+      rotate: winChartProps.xAxisLabelRotate,
+      formatter: (name: string) => {
+        const configLength = winChartProps.xAxisLabelLength;
+        if (typeof configLength === 'number' && name.length > configLength) {
+          return `${name.slice(0, configLength)}...`;
+        }
+
+        return name;
+      },
+    },
+  };
+};
+
+/**
+ * 根据 value 排序
+ * @param arr
+ * @param order
+ * @returns
+ */
+export const sortArray = (arr: ICharInfo[], order: 'asc' | 'desc') => {
+  if (order === 'asc') {
+    // 升序
+    arr.sort((a, b) => {
+      return a.value - b.value;
+    });
+  } else if (order === 'desc') {
+    // 降序
+    arr.sort((a, b) => {
+      return b.value - a.value;
+    });
+  }
+
+  return arr;
+};
+
+/**
+ * 根据 label 排序
+ * @param arr
+ * @param sortedLabels
+ * @returns
+ */
+export const sortArrayByLabel = (arr: ICharInfo[], sortedLabels: string[]) => {
+  arr.sort((a, b) => {
+    const indexA = sortedLabels.indexOf(a.label);
+    const indexB = sortedLabels.indexOf(b.label);
+    return indexA - indexB;
+  });
+
+  return arr;
+};
+
+/**
+ * 处理数据排序
+ * @param winChartProps
+ * @returns
+ */
+export const handleSort = (winChartProps: IWinChartProps) => {
+  const { data, extraData, sort } = winChartProps;
+  if (data && sort) {
+    // 1. 整体排序
+    const sortedData = sortArray([...data], sort);
+    const sortedLabels = arrDeduplication(sortedData.map((item) => item.label));
+
+    // 2. 根据标签二次排序
+    const finalSortData = sortArrayByLabel(sortedData, sortedLabels);
+    const finalSortedExtraData = sortArrayByLabel(
+      [...(extraData ?? [])],
+      sortedLabels,
+    );
+
+    return {
+      ...winChartProps,
+      data: finalSortData,
+      extraData: finalSortedExtraData,
+    };
+  }
+
+  return winChartProps;
+};
+
+export function debounce(func: Function, delay: number): Function {
+  let timer: NodeJS.Timeout;
+
+  return function (...args: any[]) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(globalThis, args);
+    }, delay);
+  };
+}