echarts 使用热力图显示秒数据

先贴图

image.png

需求是二十四小时每秒返回一条数据，并且要将数据按分类显示不同颜色。

我的思路

使用热力图，将每秒的数据转换成坐标点。横坐标是一刻度以小时，纵坐标是3600秒，为了美观每600秒换成了别名，转换成分钟

    axisLabel: {
                    interval: function (index: number) {
                        return index % 600 === 0;
                    },
                    formatter: function (value: number) {  //Y轴刻度尺别名映射
                        // 动态生成别名映射
                        const dynamicAliasMap: any = {
                            0: '0',
                            600: '10',
                            1200: '20',
                            1800: '30',
                            2400: '40',
                            3000: '50',
                            3600: '60',
                        };
                        return dynamicAliasMap[value]
                    }
                }

坐标点数据转换（热力图坐标格式[[0,0,1]],[0,1,1]）--[[横坐标,纵坐标,值]]。（因为热力图会根据值自适应颜色，我这边为了固定颜色每种类型给了固定的值）然后通过visualMap.pieces去映射

visualMap: {
  pieces: [
    { min: 0, max: 0, color: '#36AC61' },
    { min: 1, max: 1, color: '#00FFCC' }
  ]
}

将秒数据转换为坐标点，此时有24*3600秒 有八万多个坐标点，直接循环出来series会有八万多条，会导致浏览器卡死

    // $datas数据结构：[{time: "2024-04-18 00:00:05", drillState: 15}]
    let currentDatas: currentDataTypes[] = []
    if ($datas && $datas.length > 0) {
        $datas.map((m: any) => {
            const HH = dayjs(m.time).format('HH')
            const MM = dayjs(m.time).format('mm')
            const SS = dayjs(m.time).format('ss')
            const timesData = [Number(HH), Number(MM) * 60 + Number(SS), m.drillState]
            currentDatas.push({ color: colorNameParmas[m.drillState].color, name: colorNameParmas[m.drillState].name, data: timesData, drillState: m.drillState })
        })
    }

将这八万多条数据按分类转换成二级别数组，每个类型为一组

// 处理秒数据
function groupByProperty(arr: currentDataTypes[], property: string) {
    const list: any[] = []
    arr.map((m: any) => {
        const index = list.findIndex(f => f[property] === m[property])
        if (index > -1) {
            list[index].data.push(m.data)
        } else {
            m.data = [m.data]
            list.push(m)
        }
    })
    return list
}
const resultList = groupByProperty(currentDatas, 'drillState')

得到的数据格式

[{
        "color": "#222",
        "name": "未知",
        "data": [[0,0,15],[0,1,15],[0,2,15]]...
},
{
        "color": "#66FFFF",
        "name": "坐卡（起下钻）",
        "data": [[0,3,16],[0,5,16],[0,199,16]]...
}]

将数据循环出来绘成图

    resultList.forEach(f => {
        series.push({
            xAxisIndex: 0,
            yAxisIndex: 0,
            gridSize: [0, 0],
            name: f.name,
            type: 'heatmap',
            stack: 'total',
            data: f.data || [],
            label: {
                normal: {
                    show: false,
                }
            },
            itemStyle: {
                color: f.color, 
                emphasis: {
                    focus: 'series'
                },
            }
        })
    })

在数据处理结束之后，由于数据量太大导致部分坐标没显示出来，但是鼠标浮上去是可以显示的（所以排除了数据的问题）
解决：echarts默认是绘制的canvas，改为绘制为svg即可

echarts.init($element, null, { renderer: 'svg' });