echarts绘制一个热力图,纵坐标为类型,横坐标为日期加时分秒,时间越集中热力图颜色越深
时间: 2023-10-05 21:05:22 浏览: 42
可以使用 echarts 的 Heatmap 组件来绘制热力图。需要先将数据转换为适合 Heatmap 组件的格式。
假设数据格式为一个数组,每个元素包含类型、日期和数量三个属性,如下所示:
```javascript
const data = [
{ type: 'A', date: '2021-10-01 00:00:00', count: 10 },
{ type: 'B', date: '2021-10-01 01:00:00', count: 20 },
{ type: 'A', date: '2021-10-01 02:00:00', count: 30 },
...
];
```
可以使用以下代码将数据转换为 Heatmap 组件的格式:
```javascript
const xAxisData = []; // 横坐标日期数组
const yAxisData = []; // 纵坐标类型数组
const heatmapData = []; // 热力图数据数组
// 遍历数据,生成横坐标日期数组、纵坐标类型数组和热力图数据数组
data.forEach(item => {
const date = new Date(item.date);
const xAxisIndex = xAxisData.indexOf(date);
if (xAxisIndex === -1) {
xAxisData.push(date);
}
const yAxisIndex = yAxisData.indexOf(item.type);
if (yAxisIndex === -1) {
yAxisData.push(item.type);
}
heatmapData.push([xAxisIndex, yAxisIndex, item.count]);
});
// 对横坐标日期数组排序
xAxisData.sort((a, b) => a - b);
```
然后就可以使用以下代码绘制热力图:
```javascript
const chart = echarts.init(document.getElementById('chart'));
const option = {
tooltip: {
position: 'top',
formatter: params => {
return `${yAxisData[params.value[1]]} ${xAxisData[params.value[0]].toLocaleString()}<br/>数量:${params.value[2]}`;
}
},
xAxis: {
type: 'time',
data: xAxisData,
splitLine: {
show: true
},
axisLabel: {
formatter: value => {
return new Date(value).toLocaleTimeString();
}
}
},
yAxis: {
type: 'category',
data: yAxisData,
splitLine: {
show: true
}
},
series: [{
name: '数量',
type: 'heatmap',
data: heatmapData,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
progressive: 1000,
animation: false
}]
};
chart.setOption(option);
```
可以通过设置 `visualMap` 组件来调整热力图的颜色映射。例如,以下代码将数量从 0 到 100 映射到了颜色从浅蓝色到深蓝色的范围内:
```javascript
option.visualMap = {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: 10,
inRange: {
color: ['#e0ffff', '#006edd']
}
};
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)