记录highcharts样式设置

  const series = await fetchData();
  console.log(series);
  obsSeries = series.obsSeries;
  fcstSeries = series.fcstSeries;
  Highcharts.setOptions({
    global: { useUTC: false },
  });
  Highcharts.chart("chart", {
    chart: {
      spacingBottom: 0,
      minWidth: 800,
      marginLeft: 30,
      marginTop: 25,
      marginBottom: 20,
      marginRight: 10,
      style: {
        fontSize: "0.2rem",
        color: "#363a44",
        lineHeight: "0.32rem",
        fontWeight: "400",
        fontFamily: "PingFang SC",
      },
      type: "column",
    },
    accessibility: {
      enabled: false,
    },
    title: {
      text: "",
    },
    credits: { enabled: false },
    xAxis: {
      type: "datetime",
      dateTimeLabelFormats: {
        hour: "%H",
        day: "%d日",
        week: "%m-%d",
        month: "%Y-%m",
        year: "%Y",
      },
      tickInterval: 3600 * 1000 * 3,
      lineWidth: 1,
      gridLineWidth: 1,
      gridLineColor: "#ccc",
      gridLineDashStyle: "dash",
      lineColor: "#ccc",
      tickWidth: 0,
      labels: {
        overflow: "justify",
        rotation: 0,
        y: 15,
        formatter: function () {
          if (Highcharts.dateFormat("%H", this.value) === "00") {
            return Highcharts.dateFormat("%d日", this.value);
          } else {
            return Highcharts.dateFormat("%H时", this.value); //格式化x轴时间格式
          }
        },
        style: {
          color: "#363A44",
          fontSize: "10px",
          lineHight: "12px",
        },
      },
    },
    yAxis: {
      gridLineWidth: 1,
      gridLineColor: "#ccc",
      lineWidth: 1,
      lineColor: "#ccc",
      showFirstLabel: true,
      showLastLabel: true,
      endOnTick: false,
      startOnTick: false,
      minPadding: 0,
      tickAmount: 4,
      title: {
        text: `${currentThreshold.value.title}(${currentThreshold.value.unit})`,
        rotation: 0,
        y: -100,
        x: 38,
        style: {
          color: "#B3B5B9",
          fontSize: "12px",
        },
      },
      labels: {
        align: "center",
        staggerLines: 1,
        y: 6,
        x: -5,
        style: {
          color: "#686B73",
          fontWeight: "400",
          lineHeight: "12px",
          fontSize: "10px",
        },
      },
      plotLines: [
        {
          color: "#FA5151",
          dashStyle: "Dash",
          value: currentThreshold.value.threshold[0],
          label: {
            text: "严重风险",
            rotation: 0,
            verticalAlign: "middle",
            align: "right",
            style: {
              color: "#FA5151",
              fontSize: "12px",
              fontWeight: 400,
            },
          },
        },
        {
          color: "#FF8F1F",
          dashStyle: "Dash",
          value: currentThreshold.value.threshold[1],
          label: {
            text: "较大风险",
            rotation: 0,
            verticalAlign: "middle",
            align: "right",
            style: {
              color: "#FF8F1F",
              fontSize: "12px",
              fontWeight: 400,
            },
          },
        },
        {
          color: "#3662EC",
          dashStyle: "Dash",
          value: currentThreshold.value.threshold[2],
          zIndex: 9,
          label: {
            text: "轻微风险",
            rotation: 0,
            verticalAlign: "middle",
            align: "right",
            style: {
              color: "#3662EC",
              fontSize: "12px",
              fontWeight: 400,
            },
          },
        },
      ],
    },
    tooltip: {
      backgroundColor: "rgba(47, 64, 96, 0.8)",
      borderRadius: 4,
      shadow: false,
      valueSuffix: "",
      useHTML: true,
      formatter: function () {
        return ` <div style="fontSize: 13px;lineHight: 16px;borderRadius: 8px; color: #fff; position:relative;zIndex: 999999;">
          <div style="margin-top: 3px;height: 16px;">时间：${dayjs(this.x).format(
            "YYYY-MM-DD HH:mm"
          )}</div>
          <div style="margin-top: 3px;height: 16px;">${
            dayjs(this.x).isBefore(dayjs("2024-09-05 13:00").valueOf()) ? "实况" : "预报"
          }： ${this.y}${currentThreshold.value.unit}</div>`;
      },
    },
    legend: {
      symbolRadius: 0,
      enabled: false,
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0,
        borderRadius: 0,
      },
    },
    series: [
      {
        name: "实况",
        type: "column",
        color: "#0088CC",
        yAxis: 0,
        data: obsSeries,
        pointWidth: 16,
        marker: {
          enabled: false,
        },
      },
      {
        name: "预报",
        type: "column",
        color: "#00B578",
        yAxis: 0,
        data: fcstSeries,
        pointWidth: 16,
        marker: {
          enabled: false,
        },
      },
    ],
  });

const fetchData = async () => {
  // 计算fcstFH
  return await $axios
    .post("...", {
      // 请求参数
    )
    .then((res) => {
      const { fcst, obs } = res;
      let fcstSeries = getSeries(fcst);
      let obsSeries = getSeries(obs);
      console.log(fcstSeries, obsSeries);
      return {
        fcstSeries: fcstSeries,
        obsSeries: obsSeries,
      };
    });
};
const getSeries = (init) => {
  return init.datas.map((item, index) => {
    let t = dayjs(init.st).add(init.times[index], "hour").valueOf();
    return [t, Number(item.toFixed(1))];
  });
};

const warnThresholdValue = ref([
  {
    name: "vis",
    threshold: [50, 200, 500],
    unit: "m",
    title: "zzz",
  },
  {
    ...
  },
]);