用 echarts生成一个风险矩阵图用 echarts生成一个风险矩阵图用 echarts生成一个风险矩阵图用 echa

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts 风险矩阵图示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 800px; height: 600px"></div>

    <script>
      // 初始化 ECharts 实例
      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 二维数组中第三位设置颜色
            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, // 打他中二维数组的第三个值 根据当前值设置颜色 0绿色 1黄色 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>