feat: databoard

wupengfei

4 天以前 b5312ca8f8cea8218293053b1a0b5b232d321a0b

 src/views/DataBoard/utils/index.ts

@@ -24,6 +24,11 @@
};

const CommonBarChartOptions: EChartsOption = {
  grid: {
    left: '10%', // 增加左侧边距（默认10%）
    bottom: '15%',
    right: '5%',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
@@ -224,10 +229,13 @@
  data,
  xAxisData,
  name,
  yAxisName = '单位/个',
  yAxisName = '单位/元',
  color,
}: CreateNewEnterChartOptionsOptions) {
  return _.merge({}, CommonBarChartOptions, {
    grid: {
      left: '20%',
    },
    xAxis: {
      data: xAxisData,
      boundaryGap: false,
@@ -278,3 +286,102 @@
    })),
  } as EChartsOption);
}

type CreatDataBoardLeftLineChartOptions = {
  data: number[];
  xAxisData: (number | string)[];
  name: string;
  yAxisName: string;
  smooth: boolean;
  color: string;
  opacityColor: string;
};

export function creatDataBoardLeftLineChartOptions({
  data,
  xAxisData,
  name,
  yAxisName,
  smooth,
  color,
  opacityColor,
}: CreatDataBoardLeftLineChartOptions) {
  return _.merge({}, CommonBarChartOptions, {
    grid: {
      left: '15%',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    xAxis: {
      data: xAxisData,
    },
    yAxis: {
      name: yAxisName,
    },
    series: [
      {
        name: name,
        type: 'line',
        data: data,
        smooth: smooth,
        lineStyle: {
          width: 1,
          color: color, // 折线颜色
        },
        itemStyle: {
          opacity: 0,
        },
        showSymbol: false,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：0,0（右上）→ 0,1（右下）（垂直向下）
            [
              { offset: 0, color: opacityColor }, // 折线处颜色（不透明）
              { offset: 1, color: 'rgba(64, 158, 255, 0)' }, // X轴处颜色（完全透明）
            ]
          ),
        },
      },
    ],
  } as EChartsOption);
}

type CreatDataBoardLeftBarChartOptions = {
  data: number[];
  xAxisData: (number | string)[];
};

export function creatDataBoardLeftBarChartOptions({
  data,
  xAxisData,
}: CreatDataBoardLeftBarChartOptions) {
  return _.merge({}, CommonBarChartOptions, {
    xAxis: {
      data: xAxisData,
    },
    yAxis: {
      name: '单位/万元',
    },
    series: [
      {
        name: '本月',
        type: 'bar',
        data: data,
        itemStyle: {
          color: '#19DAB0',
        },
        barWidth: '15%',
      },
    ],
  } as EChartsOption);
}