congmao-cli 1.0.0

package/src/template/Vue2/src/pages/dashboard/base/index.ts

@@ -0,0 +1,702 @@
+import dayjs from 'dayjs';
+import { getChartListColor } from '@/utils/color';
+import { getRandomArray } from '@/utils/charts';
+
+/** 首页 dashboard 折线图 */
+export function constructInitDashboardDataset(type: string) {
+  const dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+  const datasetAxis = {
+    xAxis: {
+      type: 'category',
+      show: false,
+      data: dateArray,
+    },
+    yAxis: {
+      show: false,
+      type: 'value',
+    },
+    grid: {
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    },
+  };
+
+  if (type === 'line') {
+    const lineDataset = {
+      ...datasetAxis,
+      color: ['#fff'],
+      series: [
+        {
+          data: [150, 230, 224, 218, 135, 147, 260],
+          type,
+          showSymbol: true,
+          symbol: 'circle',
+          symbolSize: 0,
+          markPoint: {
+            data: [
+              { type: 'max', name: '最大值' },
+              { type: 'min', name: '最小值' },
+            ],
+          },
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+        },
+      ],
+    };
+    return lineDataset;
+  }
+  if (type === 'bar') {
+    const barDataset = {
+      ...datasetAxis,
+      color: getChartListColor(),
+      series: [
+        {
+          data: [
+            100,
+            130,
+            184,
+            218,
+            {
+              value: 135,
+              itemStyle: {
+                opacity: 0.2,
+              },
+            },
+            {
+              value: 118,
+              itemStyle: {
+                opacity: 0.2,
+              },
+            },
+            {
+              value: 60,
+              itemStyle: {
+                opacity: 0.2,
+              },
+            },
+          ],
+          type,
+          barWidth: 9,
+        },
+      ],
+    };
+    return barDataset;
+  }
+}
+
+/** 柱状图数据源 */
+export function constructInitDataset({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime: Array<string> } & Record<string, string>) {
+  const divideNum = 10;
+  const timeArray = [];
+  const inArray = [];
+  const outArray = [];
+  for (let i = 0; i < divideNum; i++) {
+    if (dateTime.length > 0) {
+      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
+      const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
+      timeArray.push(dayjs(enhandTime).format('MM-DD'));
+    } else {
+      timeArray.push(
+        dayjs()
+          .subtract(divideNum - i, 'day')
+          .format('MM-DD'),
+      );
+    }
+
+    inArray.push(getRandomArray().toString());
+    outArray.push(getRandomArray().toString());
+  }
+  const dataset = {
+    color: getChartListColor(),
+    tooltip: {
+      trigger: 'item',
+    },
+    xAxis: {
+      type: 'category',
+      data: timeArray,
+      axisLabel: {
+        color: placeholderColor,
+      },
+      axisLine: {
+        lineStyle: {
+          color: borderColor,
+          width: 1,
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: placeholderColor,
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
+      },
+    },
+    grid: {
+      top: '5%',
+      left: '25px',
+      right: 0,
+      bottom: '60px',
+    },
+    legend: {
+      icon: 'rect',
+      itemWidth: 12,
+      itemHeight: 4,
+      itemGap: 48,
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
+      left: 'center',
+      bottom: '0',
+      orient: 'horizontal',
+      data: ['本月', '上月'],
+    },
+    series: [
+      {
+        name: '本月',
+        data: outArray,
+        type: 'bar',
+      },
+      {
+        name: '上月',
+        data: inArray,
+        type: 'bar',
+      },
+    ],
+  };
+
+  return dataset;
+}
+
+export function getLineChartDataSet({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime?: Array<string> } & Record<string, string>) {
+  const divideNum = 10;
+  const timeArray = [];
+  const inArray = [];
+  const outArray = [];
+  for (let i = 0; i < divideNum; i++) {
+    if (dateTime.length > 0) {
+      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
+      const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
+      timeArray.push(dayjs(enhandTime).format('MM-DD'));
+    } else {
+      timeArray.push(
+        dayjs()
+          .subtract(divideNum - i, 'day')
+          .format('MM-DD'),
+      );
+    }
+
+    inArray.push(getRandomArray().toString());
+    outArray.push(getRandomArray().toString());
+  }
+
+  const dataSet = {
+    color: getChartListColor(),
+    tooltip: {
+      trigger: 'item',
+    },
+    grid: {
+      left: '0',
+      right: '20px',
+      top: '5px',
+      bottom: '36px',
+      containLabel: true,
+    },
+    legend: {
+      left: 'center',
+      bottom: '0',
+      orient: 'horizontal', // legend 横向布局。
+      data: ['本月', '上月'],
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: timeArray,
+      boundaryGap: false,
+      axisLabel: {
+        color: placeholderColor,
+      },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: placeholderColor,
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
+      },
+    },
+    series: [
+      {
+        name: '本月',
+        data: outArray,
+        type: 'line',
+        smooth: false,
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        itemStyle: {
+          normal: {
+            borderColor,
+            borderWidth: 1,
+          },
+        },
+        areaStyle: {
+          normal: {
+            opacity: 0.1,
+          },
+        },
+      },
+      {
+        name: '上月',
+        data: inArray,
+        type: 'line',
+        smooth: false,
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        itemStyle: {
+          normal: {
+            borderColor,
+            borderWidth: 1,
+          },
+        },
+      },
+    ],
+  };
+  return dataSet;
+}
+
+/**
+ * 获取表行数据
+ *
+ * @export
+ * @param {string} productName
+ * @param {number} divideNum
+ */
+export function getSelftItemList(productName: string, divideNum: number): string[] {
+  const productArray: string[] = [productName];
+  for (let i = 0; i < divideNum; i++) {
+    productArray.push(getRandomArray(100 * i).toString());
+  }
+
+  return productArray;
+}
+
+/**
+ * 散点图数据
+ *
+ * @export
+ * @returns {any[]}
+ */
+export function getScatterDataSet({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime?: Array<string> } & Record<string, string>): any {
+  const divideNum = 40;
+  const timeArray = [];
+  const inArray = [];
+  const outArray = [];
+  for (let i = 0; i < divideNum; i++) {
+    // const [timeArray, inArray, outArray] = dataset;
+    if (dateTime.length > 0) {
+      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
+      const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
+      timeArray.push(dayjs(enhandTime).format('MM-DD'));
+    } else {
+      timeArray.push(
+        dayjs()
+          .subtract(divideNum - i, 'day')
+          .format('MM-DD'),
+      );
+    }
+
+    inArray.push(getRandomArray().toString());
+    outArray.push(getRandomArray().toString());
+  }
+
+  return {
+    color: getChartListColor(),
+    xAxis: {
+      data: timeArray,
+      axisLabel: {
+        color: placeholderColor,
+      },
+      splitLine: { show: false },
+      axisLine: {
+        lineStyle: {
+          color: borderColor,
+          width: 1,
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      // splitLine: { show: false},
+      axisLabel: {
+        color: placeholderColor,
+      },
+      nameTextStyle: {
+        padding: [0, 0, 0, 60],
+      },
+      axisTick: {
+        show: false,
+        axisLine: {
+          show: false,
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
+      },
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    grid: {
+      top: '5px',
+      left: '25px',
+      right: '5px',
+      bottom: '60px',
+    },
+    legend: {
+      left: 'center',
+      bottom: '0',
+      orient: 'horizontal', // legend 横向布局。
+      data: ['按摩仪', '咖啡机'],
+      itemHeight: 8,
+      itemWidth: 8,
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
+    },
+    series: [
+      {
+        name: '按摩仪',
+        symbolSize: 10,
+        data: outArray.reverse(),
+        type: 'scatter',
+      },
+      {
+        name: '咖啡机',
+        symbolSize: 10,
+        data: inArray.concat(inArray.reverse()),
+        type: 'scatter',
+      },
+    ],
+  };
+}
+
+/**
+ * 获域图数据结构
+ *
+ * @export
+ * @returns {any[]}
+ */
+export function getAreaChartDataSet(): any {
+  const xAxisData = [];
+  const data1 = [];
+  const data2 = [];
+  for (let i = 0; i < 50; i++) {
+    xAxisData.push(`${i}`);
+    data1.push((getRandomArray() * Math.sin(i / 5) * (i / 5 - 5) + i / 6) * 2);
+    data2.push((getRandomArray() * Math.cos(i / 5) * (i / 5 - 5) + i / 6) * 2);
+  }
+
+  return {
+    color: getChartListColor(),
+    // title: {
+    //   text: '柱状图动画延迟',
+    // },
+    legend: {
+      left: 'center',
+      bottom: '5%',
+      orient: 'horizontal',
+      data: ['测试', '上线'],
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    xAxis: {
+      data: xAxisData,
+      splitLine: {
+        show: false,
+      },
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '测试',
+        type: 'bar',
+        data: data1,
+        emphasis: {
+          focus: 'series',
+        },
+        animationDelay(idx: number) {
+          return idx * 10;
+        },
+      },
+      {
+        name: '上线',
+        type: 'bar',
+        data: data2,
+        emphasis: {
+          focus: 'series',
+        },
+        animationDelay(idx: number) {
+          return idx * 10 + 100;
+        },
+      },
+    ],
+    animationEasing: 'elasticOut',
+    animationDelayUpdate(idx: number) {
+      return idx * 5;
+    },
+  };
+}
+
+/**
+ * 柱状图数据结构
+ *
+ * @export
+ * @param {boolean} [isMonth=false]
+ * @returns {*}
+ */
+export function getColumnChartDataSet(isMonth = false) {
+  if (isMonth) {
+    return {
+      color: getChartListColor(),
+      legend: {
+        left: 'center',
+        top: '10%',
+        orient: 'horizontal', // legend 横向布局。
+        data: ['直接访问'],
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          // 坐标轴指示器，坐标轴触发有效
+          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: ['1', '4', '8', '12', '16', '20', '24'],
+          axisTick: {
+            alignWithLabel: true,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+        },
+      ],
+      series: [
+        {
+          name: '直接访问',
+          type: 'bar',
+          barWidth: '60%',
+          data: [
+            getRandomArray(Math.random() * 100),
+            getRandomArray(Math.random() * 200),
+            getRandomArray(Math.random() * 300),
+            getRandomArray(Math.random() * 400),
+            getRandomArray(Math.random() * 500),
+            getRandomArray(Math.random() * 600),
+            getRandomArray(Math.random() * 700),
+          ],
+        },
+      ],
+    };
+  }
+
+  return {
+    color: getChartListColor(),
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+      },
+    },
+    legend: {
+      left: 'center',
+      bottom: '0%',
+      orient: 'horizontal', // legend 横向布局。
+      data: ['直接访问'],
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '13%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        axisTick: {
+          alignWithLabel: true,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: '直接访问',
+        type: 'bar',
+        barWidth: '20%',
+        data: [
+          getRandomArray(Math.random() * 100),
+          getRandomArray(Math.random() * 200),
+          getRandomArray(Math.random() * 300),
+          getRandomArray(Math.random() * 400),
+          getRandomArray(Math.random() * 500),
+          getRandomArray(Math.random() * 600),
+          getRandomArray(Math.random() * 700),
+        ],
+      },
+    ],
+  };
+}
+
+export function getPieChartDataSet({
+  radius = 42,
+  textColor,
+  placeholderColor,
+  containerColor,
+}: { radius: number } & Record<string, string>) {
+  return {
+    color: getChartListColor(),
+    tooltip: {
+      show: false,
+      trigger: 'axis',
+      position: null,
+    },
+    grid: {
+      top: '0',
+      right: '0',
+    },
+    legend: {
+      selectedMode: false,
+      itemWidth: 12,
+      itemHeight: 4,
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
+      left: 'center',
+      bottom: '0',
+      orient: 'horizontal', // legend 横向布局。
+    },
+    series: [
+      {
+        name: '销售渠道',
+        type: 'pie',
+        radius: ['48%', '60%'],
+        avoidLabelOverlap: true,
+        selectedMode: true,
+        hoverAnimation: true,
+        silent: true,
+        itemStyle: {
+          borderColor: containerColor,
+          borderWidth: 1,
+        },
+        label: {
+          show: true,
+          position: 'center',
+          formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
+          rich: {
+            value: {
+              color: textColor,
+              fontSize: 28,
+              fontWeight: 'normal',
+              lineHeight: 46,
+            },
+            name: {
+              color: '#909399',
+              fontSize: 12,
+              lineHeight: 14,
+            },
+          },
+        },
+        emphasis: {
+          label: {
+            show: true,
+            formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
+            rich: {
+              value: {
+                color: textColor,
+                fontSize: 28,
+                fontWeight: 'normal',
+                lineHeight: 46,
+              },
+              name: {
+                color: '#909399',
+                fontSize: 14,
+                lineHeight: 14,
+              },
+            },
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [
+          {
+            value: 1048,
+            name: '线上',
+          },
+          { value: radius * 7, name: '门店' },
+        ],
+      },
+    ],
+  };
+}