Apexcharts - Color-scale Treemap 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>Apexcharts - Color-scale Treemap</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 {
    padding-right: 10px;
    max-width: 650px;
    margin: 35px auto;
}

JavaScript

var options = {
  series: [
  {
    data: [
      {
        x: 'INTC',
        y: 1.2
      },
      {
        x: 'GS',
        y: 0.4
      },
      {
        x: 'CVX',
        y: -1.4
      },
      {
        x: 'GE',
        y: 2.7
      },
      {
        x: 'CAT',
        y: -0.3
      },
      {
        x: 'RTX',
        y: 5.1
      },
      {
        x: 'CSCO',
        y: -2.3
      },
      {
        x: 'JNJ',
        y: 2.1
      },
      {
        x: 'PG',
        y: 0.3
      },
      {
        x: 'TRV',
        y: 0.12
      },
      {
        x: 'MMM',
        y: -2.31
      },
      {
        x: 'NKE',
        y: 3.98
      },
      {
        x: 'IYT',
        y: 1.67
      }
    ]
  }
],
  legend: {
  show: false
},
chart: {
  height: 350,
  type: 'treemap'
},
title: {
  text: 'Treemap with Color scale'
},
dataLabels: {
  enabled: true,
  style: {
    fontSize: '12px',
  },
  formatter: function(text, op) {
    return [text, op.value]
  },
  offsetY: -4
},
plotOptions: {
  treemap: {
    enableShades: true,
    shadeIntensity: 0.5,
    reverseNegativeShade: true,
    colorScale: {
      ranges: [
        {
          from: -6,
          to: 0,
          color: '#CD363A'
        },
        {
          from: 0.001,
          to: 6,
          color: '#52B12C'
        }
      ]
    }
  }
}
};

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