// 数据源 const dataOrigin = { xAxisData: [ '01', '02', '03', '04', '05', '06', ], yAxisData: [ '10-01', '10-02', '10-03', '10-04', '10-05', '10-06', '10-07', ], seriesDatas: [ { name: '一级', data: [ [0, 0, 54], ], color: '#00E400', }, { name: '二级', data: [ [1, 1, 36], ], color: '#ffff00', }, { name: '三级', data: [ [2, 2, 199], ], color: '#ff7e00', }, { name: '四级', data: [ [3, 3, 350], ], color: '#ff0000', }, { name: '五级', data: [ [4, 4, 10], ], color: '#99004c', }, { name: '六级', data: [ [5, 5, 700], ], color: '#7e0023' }, ], }; // PM10 等级 const PM10_LEVELS = [ { icon: 'k1', label: '一级', otherName: '一级', value: 1, min: 0, max: 50, color: '#00E400', lightColor: '#D2F5A5', }, { icon: 'k2', label: '二级', otherName: '二级', value: 2, min: 51, max: 150, color: '#ffff00', lightColor: '#EBEBD8', }, { icon: 'k3', label: '三级', otherName: '三级', value: 3, min: 151, max: 250, color: '#ff7e00', lightColor: '#F2E1C7', }, { icon: 'k4', label: '四级', otherName: '四级', value: 4, min: 251, max: 350, color: '#ff0000', lightColor: '#F3D3D3', }, { icon: 'k5', label: '五级', otherName: '五级', value: 5, min: 351, max: 420, color: '#99004c', lightColor: '#E5D2ED', }, { icon: 'k6', label: '六级', otherName: '六级', value: 6, min: 421, max: '+', color: '#7e0023', lightColor: '#F3CBD7', }, ]; /** * @description 获取AQI等级 * @params {number} value */ const getLevel = (value) => { let index = 0; if (!value || value <= 50) index = 0; if (value > 50 && value <= 100) index = 1; if (value > 100 && value <= 150) index = 2; if (value > 150 && value <= 200) index = 3; if (value > 200 && value <= 300) index = 4; if (value > 300) index = 5; return { index, ...PM10_LEVELS[index] }; }; // 获取悬浮提示元素 const getTooltipRow = (params, isHideEmpty = false) => { if (isHideEmpty && !params.value) return ''; return `

${params.marker || ''} ${params.seriesName} ${params.value || '-'}

`; }; const visualMapPieces = PM10_LEVELS.map(({ min, max, color }) => ({ min, max, color })); option = { title: { text: '测试', left: 'center', textStyle: { fontWeight: 'bold', fontFamily: 'Microsoft YaHei', fontSize: 18, }, }, dataZoom: [ { id: 'dataZoomY', type: 'inside', yAxisIndex: [0], startValue:0, endValue:10, filterMode: 'empty' } ], tooltip: { position: 'top', formatter: (params) => { const dateStr = `${dataOrigin.yAxisData[params.data[1]]}-${params.name}`; const value = { marker: params.marker, seriesName: getLevel(params.data[2]).label, value: params.data[2] || '-', }; return `${dateStr}
${getTooltipRow(value)}`; }, }, grid: { top: 40, left: 65, right: 15, bottom: 65, }, visualMap: { show: false, pieces: visualMapPieces, }, legend: { show: true, icon: 'circle', bottom: 10, }, xAxis: { type: 'category', data: dataOrigin.xAxisData, axisLine: { show: false, }, axisTick: { show: false, }, splitArea: { show: true, }, }, yAxis: { type: 'category', data: dataOrigin.yAxisData, axisLine: { show: false, }, axisTick: { show: false, }, splitArea: { show: true, }, }, series: dataOrigin.seriesDatas.map(({ name, data, color }) => ({ name, data, type: 'heatmap', label: { show: true, }, itemStyle: { color, borderColor: '#fff', borderWitdh: 5, borderCap: 'round', }, })), };

Echarts在线免费图表