${params.marker || ''} ${params.seriesName} ${params.value[2] || '-'} ${params.value[1] ? '实况监测' : '模式预测'}

`; }; /** * @description 将接口数据转化为符合 echarts 的数据 * @param {array} history 历史数据 * @param {array} forecast 预测数据 * @param {boolean} diff 是否按AQI等级拆分数据 * @returns echartsData 符合echarts配置数据 */ const transformData = (history, forecast, isDiff = true) => { const xAxisData = [...new Set([...Object.keys(history)])].sort(); // const xAxisData = [...new Set([...Object.keys(history), ...Object.keys(forecast)])].sort(); const yAxisData = ['模式预测', '实况监测']; let seriesDatas = []; const seriesData = []; const markPointData = []; for (let i = 0; i < xAxisData.length; i++) { for (let j = 0; j < yAxisData.length; j++) { const key = xAxisData[i]; const historyValue = (history[key] || {}).aqi || null; const forecastValue = (forecast[key] || {}).aqi || null; seriesData.push([i, j, j ? historyValue : forecastValue]); if (j) { const symbol = getSymbol(historyValue, forecastValue); markPointData.push({ show: Boolean(symbol), xAxis: i, yAxis: 1, symbolSize: 20, symbol, }); } } } // 按AQI等级区分数据 if (isDiff) { seriesDatas = AQI_LEVELS.map(({ label, min, max, color }) => { const data = seriesData.filter(([, , value]) => { if (max === '+') return value >= min; return value >= min && value <= max; }); return { name: label, data, color }; }); } return { xAxisData, yAxisData, seriesData, seriesDatas, markPointData }; }; $.getJSON(uploadedDataURL, (data) => { const { history, forecast } = data; console.log(data); const { xAxisData, yAxisData, seriesDatas, markPointData } = transformData(history || {}, forecast || {}); const myOption = { title: { text: '空气质量等级准确率评估', left: 'center', }, grid: { height: 80, top: 70, left: 58, right: 10, bottom: 50, }, tooltip: { position: 'top', trigger: 'axis', formatter: (params) => { if (params.length !== 2) return ''; const [paramsOne, paramsTwo] = params; const result = []; const dateStr = (paramsTwo || {}).axisValue || (paramsOne || {}).axisValue; if (dateStr) result.push(dateStr); const trendStr = paramsOne.value[1] ? getTrend(paramsOne.value[2], paramsTwo.value[2]) : getTrend(paramsTwo.value[2], paramsOne.value[2]); if (trendStr) result.push(` ${trendStr}`); if (paramsOne.value[1]) { if (paramsOne) result.push(getTooltipRow(paramsOne)); if (paramsTwo) result.push(getTooltipRow(paramsTwo)); } else { if (paramsTwo) result.push(getTooltipRow(paramsTwo)); if (paramsOne) result.push(getTooltipRow(paramsOne)); } return result.join(''); }, }, xAxis: { type: 'category', data: xAxisData, splitArea: { show: true, }, axisLine: { show: false, }, axisTick: { show: false, }, }, yAxis: [ { type: 'category', data: yAxisData, axisLine: { show: false, }, axisTick: { show: false, }, }, { type: 'value', }, ], legend: { show: true, icon: 'circle', bottom: 0, }, visualMap: [ { show: false, type: 'piecewise', pieces: [ ...AQI_LEVELS.map((v) => ({ lt: v.max, gte: v.min, color: v.color, })), { value: AQI_LEVELS[0].max, color: colorRange(AQI_LEVELS[0].color, AQI_LEVELS[1].color), }, { value: AQI_LEVELS[1].max, color: colorRange(AQI_LEVELS[1].color, AQI_LEVELS[2].color), }, { value: AQI_LEVELS[2].max, color: colorRange(AQI_LEVELS[2].color, AQI_LEVELS[3].color), }, { value: AQI_LEVELS[3].max, color: colorRange(AQI_LEVELS[3].color, AQI_LEVELS[4].color), }, ], }, ], series: [ ...seriesDatas.map(({ name, data, color }) => ({ name, data, type: 'heatmap', label: { show: true, }, itemStyle: { color, borderWidth: 5, borderColor: '#fff', }, })), { type: 'line', color: '#41C15A', markPoint: { symbolOffset: [0, -35], data: markPointData, }, }, ], }; myChart.setOption(myOption); });