#Echarts:热力图 type: “heatmap“图例显示-Toy模板网

这篇具有很好参考价值的文章主要介绍了#Echarts:热力图 type: “heatmap“图例显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Heatmap on Cartesian - Apache ECharts Demo</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="chart-container"></div>
  <script src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
  <script src="./index.js"></script>
</body>
</html>

js

var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
  renderer: "canvas",
  useDirtyRect: false,
});
var app = {};

var option;

// prettier-ignore
const hours = [
    '10:28', '10:29', '11:29', '12:29'
];
// prettier-ignore
const data = [
  {
    name: '111',
    value: [0, 2, 10], // 转换为数值类型
    groupId: hours[0],
  },
  {
    name: '222',
    value: [1, 2, 100], // 转换为数值类型
    groupId: hours[1],
  },
  {
    name: '333',
    value: [2, 2, 10], // 转换为数值类型
    groupId: hours[2],
  }
];
option = {
  tooltip: {
    position: "top",
    formatter: (params) => {
      return `${params.data.groupId} <br> ${params.marker} ${params.name} `;
    },
  },
  grid: {
    height: "50%",
    top: "10%",
  },
  xAxis: {
    type: "category",
    data: hours,
    splitArea: {
      show: true,
    },
  },
  yAxis: {
    type: "category",
    data: ["", "", "", "", ""],
    splitArea: {
      show: true,
    },
  },
  visualMap: {
    show: true,
    type: "piecewise",
    pieces: [
      {
        value: 10,
        color: "green",
        label: "正常",
      },
      {
        value: 100,
        color: "pink",
        label: "异常",
      },
    ],
    orient: "horizontal",
    left: "center",
    bottom: "15%",
  },
  series: [
    {
      type: "heatmap",
      data: data,
      label: {
        show: true,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
      itemStyle: {
        borderWidth: 1,
        borderColor: "#fff",
      },
    },
  ],
};

if (option && typeof option === "object") {
  myChart.setOption(option);
}

window.addEventListener("resize", function () {
  myChart.resize();
});