<!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="main" style="width: 800px; height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById("main"))
var option = {
tooltip: {
formatter: function (params) {
return params.value[2]
},
},
xAxis: {
type: "category",
data: ["A", "B", "C", "D", "E"],
},
yAxis: {
type: "category",
data: ["1", "2", "3", "4", "5"],
},
series: [
{
type: "heatmap",
data: [
[0, 0, 0],
[0, 1, 0],
[0, 2, 0],
[0, 3, 1],
[0, 4, 1],
[1, 0, 0],
[1, 1, 0],
[1, 2, 1],
[1, 3, 1],
[1, 4, 1],
[2, 0, 1],
[2, 1, 1],
[2, 2, 1],
[2, 3, 1],
[2, 4, 1],
[3, 0, 1],
[3, 1, 1],
[3, 2, 2],
[3, 3, 2],
[3, 4, 2],
[4, 0, 1],
[4, 1, 1],
[4, 2, 2],
[4, 3, 2],
[4, 4, 2],
],
label: {
show: true,
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
visualMap: {
min: 0,
max: 2,
calculable: true,
orient: "horizontal",
left: "center",
bottom: "0%",
inRange: {
color: ["#00ff00", "#ffff00", "#ff0000"],
},
textStyle: {
color: "#000",
},
},
}
myChart.setOption(option)
myChart.on("click", (params) => {
console.log(params.value, "params")
})
</script>
</body>
</html>