Merge remote-tracking branch 'origin/dev-dataBoard'

zhengyiming

8 天以前 92921431668181fb6d3387368c751ccc40aba8cf

 src/views/DataBoard/utils/index.ts

New file
@@ -0,0 +1,288 @@
import _ from 'lodash';
import { CustomSeriesOption, EChartsOption } from 'echarts';
import * as echarts from 'echarts';

export function getScreenImageUrlsByGlob() {
  const modules = import.meta.glob('@/assets/parkScreen/*.png', { eager: true });

  const imgUrls: string[] = [];

  for (const path in modules) {
    const mod = modules[path] as { default: any };
    imgUrls.push(mod.default);
  }

  return imgUrls;
}

type CreateNewEnterChartOptionsOptions = {
  data: number[][];
  xAxisData: (number | string)[];
  name: string[];
  yAxisName?: string;
  color: string[];
};

const CommonBarChartOptions: EChartsOption = {
  grid: {
    left: '10%', // 增加左侧边距（默认10%）
    bottom: '15%',
    right: '5%',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    right: '5%',
    textStyle: {
      fontSize: 14,
      color: '#D4F1FF',
    },
    itemHeight: 5,
    itemWidth: 12,
  },
  xAxis: {
    type: 'category',
    nameTextStyle: {
      color: '#D4F1FF',
      fontSize: 12,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 12,
      color: '#D4F1FF',
    },
  },
  yAxis: {
    nameTextStyle: {
      color: '#D4F1FF',
      fontSize: 12,
    },
    axisLabel: {
      fontSize: 12,
      color: '#D4F1FF',
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#384658',
      },
    },
  },
  series: [],
};

export function createNewEnterChartOptions({
  data,
  xAxisData,
  name,
  yAxisName = '单位/个',
  color,
}: CreateNewEnterChartOptionsOptions) {
  return _.merge({}, CommonBarChartOptions, {
    xAxis: {
      data: xAxisData,
    },
    yAxis: {
      name: yAxisName,
    },
    series: data.map((x, index) => ({
      name: name[index],
      type: 'bar',
      data: x?.map((y) => ({
        value: y,
      })),
      itemStyle: {
        color: color[index],
      },
      barWidth: '15%',
    })),
  } as EChartsOption);
}

export function createNewDeclareChartOptions({
  data,
  xAxisData,
  name,
  yAxisName = '单位/个',
  color,
}: CreateNewEnterChartOptionsOptions) {
  return _.merge({}, CommonBarChartOptions, {
    xAxis: {
      data: xAxisData,
    },
    yAxis: {
      name: yAxisName,
    },
    series: data.map((x, index) => ({
      name: name[index],
      type: 'bar',
      data: x?.map((y) => ({
        value: y,
      })),
      label: {
        show: true,
        position: 'top',
        distance: 0,
        formatter: '...',
        fontSize: 16,
        color: color[index],
      },
      itemStyle: {
        color: color[index],
        opacity: 0.6,
      },
      barWidth: 14,
    })),
  } as EChartsOption);
}

type CreatInsurePersonChartOptionsOptions = {
  data: number[];
  xAxisData: (number | string)[];
  name: string;
  yAxisName?: string;
};

export function createInsurePersonOptionChartOptions({
  data,
  xAxisData,
  name,
  yAxisName = '单位/个',
}: CreatInsurePersonChartOptionsOptions) {
  return {
    legend: {
      right: '5%',
      textStyle: {
        fontSize: 14,
        color: '#D4F1FF',
      },
      itemHeight: 0,
      itemWidth: 0,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    xAxis: {
      nameTextStyle: {
        color: '#D4F1FF',
        fontSize: 12,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 12,
        color: '#D4F1FF',
      },
      data: xAxisData,
    },
    yAxis: {
      axisLabel: {
        fontSize: 12,
        color: '#D4F1FF',
      },
      nameTextStyle: {
        color: '#D4F1FF',
        fontSize: 12,
      },
      name: yAxisName,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#384658',
        },
      },
    },
    series: {
      name: name,
      type: 'line',
      data: data,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 渐变方向：0,0（右上）→ 0,1（右下）（垂直向下）
          [
            { offset: 0, color: `rgba(0, 166, 255, 0.2)` }, // 折线处颜色（不透明）
            { offset: 1, color: 'rgba(64, 158, 255, 0)' }, // X轴处颜色（完全透明）
          ]
        ),
      },
    },
  };
}

export function createNewBountyReleaseAmountChartOptions({
  data,
  xAxisData,
  name,
  yAxisName = '单位/元',
  color,
}: CreateNewEnterChartOptionsOptions) {
  return _.merge({}, CommonBarChartOptions, {
    grid: {
      left: '20%',
    },
    xAxis: {
      data: xAxisData,
      boundaryGap: false,
    },
    yAxis: {
      name: yAxisName,
    },
    legend: {
      itemWidth: 12,
      itemHeight: 5,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    series: data.map((x, index) => ({
      name: name[index],
      type: 'line',
      data: x?.map((y) => ({
        value: y,
      })),
      smooth: true,
      lineStyle: {
        width: 1,
        color: color[index], // 折线颜色
      },
      itemStyle: {
        opacity: 0,
      },
      showSymbol: false,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 渐变方向：0,0（右上）→ 0,1（右下）（垂直向下）
          [
            { offset: 0, color: `${color[index]}` }, // 折线处颜色（不透明）
            { offset: 0.5, color: 'rgba(64, 158, 255, 0)' }, // X轴处颜色（完全透明）
          ]
        ),
      },
    })),
  } as EChartsOption);
}