创建 Highcharts 树状图（Treemap）也是相对简单的，以下是一个基本的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highcharts 树状图</title>
  <!-- 引入 Highcharts 库 -->
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <!-- 引入 Highcharts 的 Treemap 模块 -->
  <script src="https://code.highcharts.com/modules/treemap.js"></script>
</head>
<body>

<!-- 在这里创建一个容器用于放置图表 -->
<div id="container" style="width: 600px; height: 400px;"></div>

<script>
// 使用 Highcharts 创建树状图
Highcharts.chart('container', {
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    // 数据部分，通过 levels 可以设置不同层级的样式
    levels: [{
      level: 1,
      layoutAlgorithm: 'squarified',
      dataLabels: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        style: {
          fontSize: '15px',
          fontWeight: 'bold'
        }
      }
    }],
    data: [{
      id: 'A',
      name: 'Category A',
      color: '#EC2500'
    }, {
      id: 'B',
      name: 'Category B',
      color: '#ECE100'
    }, {
      id: 'C',
      name: 'Category C',
      color: '#EC9800'
    }, {
      id: 'D',
      name: 'Category D',
      color: '#EC9800'
    }],
    dataLabels: {
      enabled: true,
      align: 'left',
      verticalAlign: 'top',
      style: {
        fontSize: '15px',
        fontWeight: 'bold'
      }
    }
  }],
  title: {
    text: 'Highcharts 树状图示例'
  }
});
</script>

</body>
</html>

上述代码中，data 数组包含了树状图的数据。每个元素都是一个节点，包括 id（唯一标识）、name（节点名称）、color（节点颜色）等属性。通过 levels 可以设置不同层级的样式，包括布局算法、数据标签等。


转载请注明出处：http://www.zyzy.cn/article/detail/5058/Highcharts