要将Am4Chart treemap 的默认级别设置为2加载图表,可以使用以下代码示例:
// 导入AmCharts库
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
// 初始化AmCharts主题
am4core.useTheme(am4themes_animated);
// 创建图表实例
let chart = am4core.create("chartdiv", am4charts.TreeMap);
// 将默认级别设置为2
chart.maxLevels = 2;
// 添加数据
chart.data = [
{
name: "总部",
children: [
{
name: "部门1",
value: 100
},
{
name: "部门2",
value: 200
}
]
},
{
name: "分部",
children: [
{
name: "分部1",
value: 150
},
{
name: "分部2",
value: 250
}
]
}
];
// 创建系列
let series = chart.series.push(new am4charts.TreeMapSeries());
// 设置数据字段
series.dataFields.value = "value";
series.dataFields.name = "name";
series.dataFields.children = "children";
// 设置颜色样式
series.colors.step = 2;
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#fff");
// 配置其他图表属性
chart.padding(20, 20, 20, 20);
// 更新图表
chart.invalidateData();
在上面的代码示例中,我们首先导入AmCharts库和主题,然后创建一个treemap图表实例。然后,我们将maxLevels属性设置为2,这将设置默认的显示级别为2。接下来,我们添加数据,创建一个系列,并设置相应的数据字段。最后,我们配置了其他图表属性,并更新图表以显示更改。