图表设置

const rendChart = (min, max) => {
  Highcharts.setOptions({
    global: { useUTC: false },
  });
  Highcharts.chart('hourly-chart', {
    chart: {
      spacingBottom: 0,
      marginLeft: 53,
      marginTop: 10,
      marginBottom: 0,
      marginRight: 13,
      style: {
        fontSize: '0.2rem',
        color: '#363a44',
        lineHeight: '0.32rem',
        fontWeight: '400',
        fontFamily: 'PingFang SC',
      },
      type: 'spline',
    },
    accessibility: {
      enabled: false,
    },
    title: {
      text: '',
    },
    credits: { enabled: false },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        hour: '%H',
        day: '%d日',
        week: '%m-%d',
        month: '%Y-%m',
        year: '%Y',
      },
      min: min,
      max: max,
      tickInterval: 3600 * 1000 * 3,
      lineWidth: 0,
      gridLineWidth: 0,
      tickWidth: 0,
      labels: {
        enabled: false,
      },
      plotBands: getPlotBands(),
    },
    yAxis: {
      lineWidth: 0,
      gridLineWidth: 0,
      title: {
        text: '',
      },
      labels: {
        align: 'center',
        overflow: 'justify',
        y: 0,
        x: -7,
        formatter: function () {
          return this.value + '℃';
        },
        style: {
          color: '#686B73',
          fontWeight: '400',
          lineHeight: '12px',
          fontSize: '12px',
          textOverflow: 'none',
        },
        zIndex: 10,
      },
    },
    tooltip: {
      backgroundColor: 'rgba(52, 174, 237, 0.9)',
      shadow: false,
      valueSuffix: '',
      useHTML: true,
      margin: 0,
      padding: 0,
      borderRadius: 0,
      formatter: function () {
        return `<div class="tooltip" style="width: 110px;height: 52px;display: flex;flex-direction: column;margin: 0px;padding: 10px;fontSize: 13px;color: #fff;">
          <div style="height: 16px;lineHeight: 16px;backgroundColor: 'rgba(52, 174, 237, 0.9)';">${dayjs(
            this.x
          ).format('M/DD HH')}点</div>
          <div style="height: 16px;lineHeight: 16px;backgroundColor: 'rgba(52, 174, 237, 0.9)';">weather${
            this.y
          }℃</div>
        </div>`;
      },
    },
    legend: {
      enabled: false,
    },
    plotOptions: {
      spline: {
        dataLabels: {
          enabled: true,
          useHTML: true,
          x: 0,
          formatter: function () {
            return `<img class="charts-label" style="display: flex;alignItems: center;width: 20px;height: 20px;" src="${imageUrl(
              `ww/${this.point.ww}.png`
            )}" alt="hourly" />`;
          },
        },
        states: {
          hover: {
            halo: {
              size: 6,
            },
          },
        },
      },
      series: {
        marker: {
          radius: 2,
          width: 1,
          lineWidth: 1,
          borderWidth: 1,
          symbol: 'circle',
        },
      },
    },
    series: [
      {
        name: '实况',
        type: 'spline',
        color: '#FF8F1F',
        yAxis: 0,
        data: hourlyData.value,
        pointWidth: 70,
        marker: {
          enabled: false,
        },
      },
    ],
  });
};

min与max设置

const hourlyDataFormat = (data) => {
  data.value.forEach((item, index) => {
    item.wsl = getWindLevel(item.ws);
    if (index) {
      let before = getWindLevel(data.value[index - 1].ws);
      item.isBefore = before === item.wsl;
    } else item.isBefore = false;
    if (index !== data.value.length - 1) {
      let after = getWindLevel(data.value[index + 1].ws);
      item.isAfter = after === item.wsl;
    } else item.isAfter = false;
    // 温度为null处理
    item.temp = item.temp !== null ? parseFloat(item.temp) : '--';
    item.pr = item.pr !== null ? parseFloat(item.pr) : '--';
    item.x = dayjs(item.t).valueOf();
    item.y = Number(item.temp);
    item.t = dayjs(item.t).get('hour');
    item.ww = parseInt(item.ww).toString();
    item.ww = item.t >= 6 && item.t < 20 ? item.ww.padStart(3, '0') : item.ww.padStart(2, '0');
  });
  let min = data.value[0].x - 3600 * 1000 * 1.5;
  let max = data.value[data.value.length - 1].x + 3600 * 1000 * 1.5;
  nextTick(() => {
    rendChart(min, max);
  });
};

附加样式设置

#hourly-chart {
  height: 1.88rem;
  width: 100%;
  :deep(.charts-label) {
    margin-top: -0.3rem;
    margin-left: -0.2rem;
    position: inherit;
    z-index: 1 !important;
  }
  :deep(.highcharts-tooltip) {
    margin-top: 0.33rem;
    margin-left: 0.05rem;
    span {
      .tooltip {
        position: inherit;
        z-index: 9999 !important;
        background: rgba(52, 174, 237, 0.9);
        border-radius: 0px 55px 55px 24px;
      }
    }
  }
}

plotBands是图表背后分条的样式

const getPlotBands = () => {
  let plotBands = [];
  let colors = ['rgba(243, 245, 249, 1)', 'rgba(255,255,255,1)', 'rgba(52, 174, 237, 0.1)'];
  hourlyData.value.forEach((item, index) => {
    // if (index !== hourlyData.value.length - 1) {
    plotBands.push({
      from: item.x - 3600 * 1000 * 1.5,
      to: item.x + 3600 * 1000 * 1.5,
      color: index === 0 ? colors[2] : colors[index % 2],
    });
    // } else {
    plotBands.push({
      from: item.x,
      to: item.x,
      color: colors[index % 2],
    });
    // }
  });
  console.log(plotBands);
  console.log(hourlyData.value);
  return plotBands;
};