Apexcharts - Simple HeatMap 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>Apexcharts - Simple HeatMap</title>
</head>

<body>
<div id="chart"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/apexcharts/3.35.0/apexcharts.min.js"></script>
</body>
</html>

CSS

#chart {
    max-width: 650px;
    margin: 35px auto;
}

JavaScript

function generateData(count, yrange) {
  var i = 0;
  var series = [];
  while (i < count) {
    var x = 'w' + (i + 1).toString();
    var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

    series.push({
      x: x,
      y: y
    });
    i++;
  }
  return series;
}

var options = {
  series: [{
  name: 'Metric1',
  data: generateData(18, {
    min: 0,
    max: 90
  })
},
{
  name: 'Metric2',
  data: generateData(18, {
    min: 0,
    max: 90
  })
},
{
  name: 'Metric3',
  data: generateData(18, {
    min: 0,
    max: 90
  })
},
{
  name: 'Metric4',
  data: generateData(18, {
    min: 0,
    max: 90
  })
},
{
  name: 'Metric5',
  data: generateData(18, {
    min: 0,
    max: 90
  })
},
{
  name: 'Metric6',
  data: generateData(18, {
    min: 0,
    max: 90
  })
},
{
  name: 'Metric7',
  data: generateData(18, {
    min: 0,
    max: 90
  })
},
{
  name: 'Metric8',
  data: generateData(18, {
    min: 0,
    max: 90
  })
},
{
  name: 'Metric9',
  data: generateData(18, {
    min: 0,
    max: 90
  })
}
],
  chart: {
  height: 350,
  type: 'heatmap',
},
dataLabels: {
  enabled: false
},
colors: ["#008FFB"],
title: {
  text: 'HeatMap Chart (Single color)'
},
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();