ECharts 的 Treemap 是用来展示层级结构数据的图表,你可以通过设置数据的层级关系来创建 Treemap。以下是一个简单的例子,演示如何在 ECharts 中设置 Treemap 的层级结构:
// 导入 ECharts 库
import echarts from 'echarts';

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('myChart'));

// 设置 Treemap 数据
var data = [
  {
    name: 'Level 1-1',
    value: 100,
    children: [
      {
        name: 'Level 2-1',
        value: 30,
      },
      {
        name: 'Level 2-2',
        value: 70,
      },
    ],
  },
  {
    name: 'Level 1-2',
    value: 50,
    children: [
      {
        name: 'Level 2-3',
        value: 20,
      },
      {
        name: 'Level 2-4',
        value: 30,
      },
    ],
  },
];

// 设置 Treemap 的配置项
var option = {
  series: [
    {
      type: 'treemap',
      data: data,
      label: {
        show: true,
        formatter: '{b}',
      },
      emphasis: {
        label: {
          show: true,
        },
      },
    },
  ],
};

// 使用配置项显示图表
myChart.setOption(option);

在上述例子中,data 数组定义了 Treemap 的层级结构。每个对象都有一个 name 表示节点的名称,value 表示节点的值,以及 children 表示子节点的数组。通过这样的层级结构,你可以自定义 Treemap 中各个节点的层级关系。

注意:确保你已经引入了 ECharts 库,并根据你的项目环境适当修改导入语句。


转载请注明出处:http://www.pingtaimeng.com/article/detail/6271/ECharts