frontend-admin/src/features/invigilation/ExamInvigilation/chartOpt.js

const animationIsOpen = true;

export function getInviTypesOption(dataList) {
  if (!dataList.length) return null;
  const chartColor = [
    "#2D99FF",
    "#4346D3",
    "#4D1D83",
    "#5E2BBC",
    "#6648FF",
    "#F43469",
    "#16CEB9",
  ];

  const seriesData = dataList.map((item) => {
    return {
      name: item.type,
      value: item.warnCount,
    };
  });

  return {
    animation: animationIsOpen,
    color: chartColor,
    grid: {
      top: "20%",
      bottom: "10%",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{d}%",
      backgroundColor: "rgba(63,67,87,0.9)",
      padding: 10,
      textStyle: {
        fontSize: 12,
        color: "#E1E6EF",
        fontWeight: 500,
        lineHeight: 18,
      },
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["55%", "85%"],
        data: seriesData,
        label: {
          show: false,
        },
      },
    ],
  };
}
export function getInviAreaOption(dataList) {
  if (!dataList.length) return null;

  const chartColor = [
    "#6648FF",
    "#5E2BBC",
    "#4D1D83",
    "#4346D3",
    "#2D99FF",
    "#16CEB9",
  ];

  const seriesData = dataList.map((item) => {
    return {
      name: `${item.province}，${item.warnCount}`,
      value: item.warnCount,
    };
  });

  return {
    animation: animationIsOpen,
    color: chartColor,
    grid: {
      top: "20%",
      bottom: "10%",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{d}%",
      backgroundColor: "rgba(63,67,87,0.9)",
      padding: 10,
      textStyle: {
        fontSize: 12,
        color: "#E1E6EF",
        fontWeight: 500,
        lineHeight: 18,
      },
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: "占比",
        type: "pie",
        radius: ["55%", "85%"],
        data: seriesData,
        label: {
          show: false,
        },
      },
    ],
  };
}

export function getInviTimeOption(dataList) {
  if (!dataList.length) return;

  return {
    animation: animationIsOpen,
    grid: {
      show: true,
      top: "22%",
      bottom: "15%",
      left: "8%",
      right: "5%",
      borderColor: "#292C38",
    },
    legend: {
      show: true,
      top: 17,
      right: 20,
      itemGap: 20,
      itemWidth: 16,
      itemHeight: 4,
      icon: "roundRect",
      textStyle: {
        color: "rgba(225, 230, 239, 0.5)",
        fontSize: 12,
        padding: [0, 0, 0, 5],
      },
    },
    tooltip: {
      show: true,
      trigger: "axis",
      backgroundColor: "rgba(63,67,87,0.9)",
      padding: 10,
      textStyle: {
        fontSize: 12,
        color: "#E1E6EF",
        fontWeight: 500,
        lineHeight: 18,
      },
    },
    xAxis: {
      type: "category",
      data: dataList.map((item) => item.hour),
      interval: 5,
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#292C38",
        },
      },
      axisLabel: {
        color: "#E1E6EF",
        fontSize: 10,
      },
      axisTick: {
        show: true,
        inside: true,
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#292C38",
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        fontSize: 10,
        color: "#E1E6EF",
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "在线考生",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: dataList.map((item) => item.onlineCount),
        itemStyle: {
          color: "#16CEB9",
        },
        lineStyle: {
          width: 4,
          color: "#16CEB9",
        },
      },
      {
        name: "预警数量",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: dataList.map((item) => item.warnCount),
        itemStyle: {
          color: "#F7517F",
        },
        lineStyle: {
          width: 4,
          color: "#F7517F",
        },
      },
    ],
  };
}

export function getInviMapOption(dataList) {
  if (!dataList.length) return;

  const countData = dataList.map((item) => {
    return {
      name: item.province,
      ...item,
    };
  });

  return {
    tooltip: {
      trigger: "item",
      formatter(params) {
        if (!params.data) return;
        const { name, onlineCount, warnCount } = params.data;
        return `<span style="color:#2D99FF">${name}</span><br />在线人数：${onlineCount}<br />预警总数：${warnCount}`;
      },
      backgroundColor: "rgba(63,67,87,0.95)",
      padding: 10,
      triggerOn: "click",
      textStyle: {
        fontSize: 12,
        color: "#E1E6EF",
        fontWeight: 500,
        lineHeight: 18,
        rich: {
          n: {
            color: "#2D99FF",
          },
        },
      },
    },
    series: [
      {
        name: "数量",
        type: "map",
        mapType: "china",
        layoutCenter: ["50%", "50%"],
        layoutSize: "100%",
        data: countData,
        itemStyle: {
          areaColor: "rgba(63, 67, 87, 0.4)",
          borderColor: "#2D99FF",
          borderWidth: 1,
        },
        emphasis: {
          label: {
            show: false,
          },
          itemStyle: {
            areaColor: "#2D99FF",
          },
        },
      },
    ],
  };
}