画一个echarts热力图,24小时数据有数据,x轴y轴不显示,鼠标移入弹出对应提示框,热力图分成3排,8列显示并且显示的每列每排有空隙隔开
时间: 2024-02-25 21:54:57 浏览: 39
好的,我来给你演示一下如何用Echarts绘制这样一个热力图,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts热力图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width:600px;height:300px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('chart'));
var data = [[0,0,10],[1,0,20],[2,0,30],[3,0,40],[4,0,50],[5,0,60],[6,0,70],[7,0,80],
[0,1,90],[1,1,80],[2,1,70],[3,1,60],[4,1,50],[5,1,40],[6,1,30],[7,1,20],
[0,2,50],[1,2,60],[2,2,70],[3,2,80],[4,2,90],[5,2,80],[6,2,70],[7,2,60]];
var option = {
tooltip: {
formatter: function (params) {
return '数据值: ' + params.value[2];
}
},
xAxis: {
show: false
},
yAxis: {
show: false
},
series: [{
type: 'heatmap',
data: data,
label: {
show: true
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
progressive: 1000,
animation: false
}]
};
myChart.setOption(option);
</script>
</body>
</html>
```
这里我们使用了Echarts的`heatmap`类型来绘制热力图,数据存储在`data`数组中,其中每个元素表示一条数据,由三个值构成,分别是横坐标、纵坐标和数据值。
为了让x轴和y轴不显示,我们将它们的`show`属性设置为`false`。
为了让鼠标移入时弹出提示框,我们设置了tooltip的formatter函数。
为了让热力图分成3排,8列显示并且显示的每列每排有空隙隔开,我们需要在数据上做一些调整。
最后,我们需要注意一下样式设置,让热力图看起来更美观一些。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)