wupengfei
3 天以前 89436385a31b0f31c33bb4688ab7c3b549ecc125
src/views/DataBoard/utils/index.ts
@@ -286,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);
}