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

`; }; /** * @description 将接口数据转化为符合 echarts 的数据 * @param {array} history 历史数据 * @param {array} forecast 预测数据 * @param {boolean} diff 是否按AQI等级拆分数据 * @returns echartsData 符合echarts配置数据 */ const transformData = (history, forecast, isDiff = false) => { const xAxisData = [...new Set([...Object.keys(history)])].sort(); const yAxisData = ['模式预测', '实况监测']; let seriesData = []; let seriesDatas = []; const markPointData = []; const factors = []; for (let i = 0; i < xAxisData.length; i++) { for (let j = 0; j < yAxisData.length; j++) { const key = xAxisData[i]; const historyValue = getPrimaryLabel((history[key] || {}).primary) || null; const forecastValue = getPrimaryLabel((forecast[key] || {}).primary) || null; seriesData.push([i, j, j ? historyValue : forecastValue]); if (!factors.includes(historyValue)) factors.push(historyValue); if (!factors.includes(forecastValue)) factors.push(forecastValue); if (j) { const symbol = getSymbol(historyValue, forecastValue); markPointData.push({ show: Boolean(symbol), xAxis: i, yAxis: 1, symbolSize: 20, symbol, }); } } } seriesData = seriesData.map(([x, y, factor]) => { const index = factors.findIndex((v) => v === factor); return [x, y, index]; }); // 按AQI等级区分数据 if (isDiff) { seriesDatas = factors.map((v, i) => { const data = seriesData.filter((v) => v[2] === i); const color = v === '无' ? '#EFEFEF' : colors[i]; return { name: v, data, color }; }); } return { xAxisData, yAxisData, seriesData, seriesDatas, markPointData, factors }; }; $.getJSON(uploadedDataURL, (data) => { const { history, forecast } = data; console.log(data); const { xAxisData, yAxisData, seriesDatas, markPointData, factors } = transformData( history || {}, forecast || {}, true ); const myOption = { title: { text: '首要污染物准确率评估', left: 'center', }, grid: { height: 80, top: 70, left: 58, right: 10, bottom: 50, }, 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, }, 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); if (paramsOne.value[1]) { if (paramsOne) result.push(getTooltipRow(paramsOne, factors)); if (paramsTwo) result.push(getTooltipRow(paramsTwo, factors)); } else { if (paramsTwo) result.push(getTooltipRow(paramsTwo, factors)); if (paramsOne) result.push(getTooltipRow(paramsOne, factors)); } return result.join(''); }, }, visualMap: [ { show: false, type: 'piecewise', pieces: factors.map((v, i) => ({ value: i, name: v, color: v === '无' ? '#EFEFEF' : colors[i], })), }, ], series: [ { type: 'line', color: '#41C15A', markPoint: { symbolOffset: [0, -35], data: markPointData, }, }, ...seriesDatas.map(({ name, data, color }) => ({ name, data, type: 'heatmap', label: { show: true, formatter: (params) => { if (!params.value.length) return ''; return factors[params.value[2]]; }, }, itemStyle: { color, borderWidth: 2, borderColor: '#fff', }, })), ], }; myChart.setOption(myOption); });