请给出一个echarts 热力图的代码
时间: 2024-03-02 19:48:58 浏览: 97
以下是一个 echarts 热力图的基本代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts 热力图示例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个容器来放置 echarts 热力图 -->
<div id="heatmap" style="width: 600px; height: 400px;"></div>
<script>
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('heatmap'));
// 配置项
var option = {
// 设置热力图的标题
title: {
text: '热力图示例'
},
// 设置热力图的提示框
tooltip: {
position: 'top'
},
// 设置热力图的坐标系
grid: {
height: '50%',
y: '10%'
},
// 设置热力图的数据
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '10%'
},
// 设置热力图的系列数据
series: [{
name: '热力图示例',
type: 'heatmap',
data: [[0,0,50],[0,1,10],[0,2,20],[1,0,30],[1,1,60],[1,2,70],[2,0,80],[2,1,90],[2,2,100]]
}]
};
// 将配置项设置给 echarts 实例
myChart.setOption(option);
</script>
</body>
</html>
```
以上代码中的 `data` 数组中的每个元素都代表一个数据点,其中第一个和第二个元素代表数据点的横坐标和纵坐标,第三个元素代表数据点的值。
阅读全文