public-fuse/src/view/statistics/statisticsInject.ts

import * as uecharts from "echarts";
import { reactive } from "vue";
import {
  StatisticsParams,
  getSceneStatistics,
  getCaseStatistics,
  getCameraTypeStatistics,
  getCaseTimeStatistics,
  getCasePlaceStatistics,
  getCaseReasonStatistics,
} from "@/store/statistics";

export const echarts = uecharts;
export type { EChartsType } from "echarts";

export type ConfigItem = {
  title: string;
  data: any;
};

export const statisticsConfigs: ConfigItem[] = reactive([
  {
    title: "火灾场景数据采集统计",
    data: {
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "right",
        type: "scroll",
      },
      series: [
        {
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 3,
          },
          name: "火灾场景数据采集统计",
          type: "pie",
          label: {
            formatter: "{c}个",
            rich: {
              time: {
                fontSize: 10,
                color: "#999",
              },
            },
          },
          radius: "50%",
          center: ["40%", "50%"],
          data: [],
        },
      ],
    },
  },
  {
    title: "采集设备类型统计",
    data: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          label: {
            show: true,
          },
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
      ],
    },
  },
  {
    title: "火灾场景数据采集统计",
    data: {
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "right",
        type: "scroll",
        // top: "center",
      },
      series: [
        {
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 3,
          },
          name: "火灾场景数据采集统计",
          type: "pie",
          label: {
            formatter: "{d}%",
            rich: {
              time: {
                fontSize: 10,
                color: "#999",
              },
            },
          },
          radius: "50%",
          center: ["40%", "50%"],
          data: [],
        },
      ],
    },
  },
  {
    title: "火灾趋势分析",
    data: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        data: [],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          label: {
            show: true,
          },
          data: [],
          type: "line",
        },
      ],
    },
  },
  {
    title: "起火场所统计",
    data: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        data: [],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          label: {
            show: true,
          },
          data: [],
          type: "bar",
        },
      ],
    },
  },
  {
    title: "火灾原因统计",
    data: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        data: [],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          label: {
            show: true,
          },
          data: [],
          type: "bar",
        },
      ],
    },
  },
]);

const numRotate = 8;
const numSlide = 20;
export const updateParams = async (params: StatisticsParams) => {
  const statisticsItemsArray = await Promise.all([
    getSceneStatistics(params),
    getCameraTypeStatistics(params),
    getCaseStatistics(params),
    getCaseTimeStatistics(params),
    getCasePlaceStatistics(params),
    getCaseReasonStatistics(params),
  ]);

  const radiusNds = [0, 2];

  for (let ndx = 0; ndx < statisticsConfigs.length; ndx++) {
    let items = statisticsItemsArray[ndx];

    if (radiusNds.includes(ndx)) {
      statisticsConfigs[ndx].data.series![0].data = items.map((item) => ({
        value: item.dataCount,
        name: item.groupKey,
      }));
      console.log(statisticsConfigs[ndx].data);
    } else {
      statisticsConfigs[ndx].data.xAxis.data = items.map(
        (item) => item.groupKey
      );
      statisticsConfigs[ndx].data.xAxis.axisLabel = {
        interval: "auto",
        rotate: 0,
      };
      statisticsConfigs[ndx].data.dataZoom = [
        {
          id: 1,
          type: "inside",
          start: 0,
          end: 100,
          disabled: true,
          zoomLock: true,
          show: false,
        },
        {
          id: 2,
          start: 0,
          end: 100,
          disabled: true,
          zoomLock: true,
          show: false,
        },
      ];

      if (items.length > numRotate && items.length < numSlide) {
        statisticsConfigs[ndx].data.xAxis.axisLabel = {
          interval: 0,
          rotate: 30,
        };
      } else if (items.length >= numSlide) {
        statisticsConfigs[ndx].data.dataZoom = [
          {
            id: 1,
            type: "inside",
            start: 0,
            end: 100,
            disabled: false,
            zoomLock: false,
            show: true,
          },
          {
            id: 2,
            start: 0,
            end: 100,
            disabled: false,
            zoomLock: false,
            show: true,
          },
        ];
      }
      statisticsConfigs[ndx].data.series![0].data = items.map(
        (item) => item.dataCount
      );
    }
  }
};