echart出热力图
时间: 2023-07-22 22:04:34 浏览: 104
要使用 ECharts 绘制热力图,需要使用 `heatmap` 组件。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts Heatmap Demo</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="myChart" style="width: 600px; height:400px;"></div>
<script>
// 基于准备好的 DOM,初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('myChart'));
// 定义热力图数据
var data = [
[0, 0, 5],
[0, 1, 2],
[0, 2, 4],
[1, 0, 1],
[1, 1, 8],
[1, 2, 9],
[2, 0, 3],
[2, 1, 8],
[2, 2, 7]
];
// 定义热力图配置项
var option = {
tooltip: {},
xAxis: {
type: 'category',
data: ['A', 'B', 'C']
},
yAxis: {
type: 'category',
data: ['X', 'Y', 'Z']
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'vertical',
left: 'right',
top: 'center'
},
series: [{
name: 'heatmap',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
在上面的示例中,我们定义了一个 3x3 的热力图数据,然后使用 `heatmap` 组件将其绘制。其中:
- `xAxis` 和 `yAxis` 分别定义了横轴和纵轴的数据,这里都是类别型数据(`category`)。
- `visualMap` 定义了可视化映射规则,用于将数值映射到颜色值,从而实现可视化效果。
- `series` 定义了图表系列,包括名称、类型、数据等属性。这里我们只定义了一个热力图系列,它的数据来源于 `data` 变量。
你可以根据需要修改示例代码中的数据和参数,进一步定制你的热力图效果。
阅读全文