图表设置

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;
};