// 导入 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