win-chart 1.0.0 → 1.0.2

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

@@ -1,112 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

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