下面的代码是使用Echart的treemap的示例，我希望每个系列按垂直顺序排列，然后连接到每个系列，再根据数据进行调整大小。
在这个示例中，每个系列将按其大小随机排列。
https://echarts.apache.org/examples/an/editor.html?c=treemap-disk
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/disk.tree.json', function (diskData) {
myChart.hideLoading();
const formatUtil = echarts.format;
function getLevelOption() {
return [
{
itemStyle: {
borderWidth: 0,
gapWidth: 5
}
},
{
itemStyle: {
gapWidth: 1
}
},
{
colorSaturation: [0.35, 0.5],
itemStyle: {
gapWidth: 1,
borderColorSaturation: 0.6
}
}
];
}
myChart.setOption(
(option = {
title: {
text: '磁盘使用情况',
left: 'center'
},
tooltip: {
formatter: function (info) {
var value = info.value;
var treePathInfo = info.treePathInfo;
var treePath = [];
for (var i = 1; i < treePathInfo.length; i++) {
treePath.push(treePathInfo[i].name);
}
return [
'<div class="tooltip-title">' +
formatUtil.encodeHTML(treePath.join('/')) +
'</div>',
'磁盘使用情况: ' + formatUtil.addCommas(value) + ' KB'
].join('');
}
},
series: [
{
name: '磁盘使用情况',
type: 'treemap',
visibleMin: 300,
label: {
show: true,
formatter: '{b}'
},
itemStyle: {
borderColor: '#fff'
},
levels: getLevelOption(),
data: diskData
}
]
})
);
});
这是我期望的结果。 在此输入图像描述
据我所知，目前似乎不可能。您可以通过
squareRatio属性来影响区域的形状，但我无法垂直对齐。如果您不需要平移和缩放，您可以为每个类别放置一个树图，并相应地调整位置（例如：
left: '20%'）和大小（例如：width: '25%'）。这里是一个示例：
option = { series: [ { type: 'treemap', name: 'CATEGORY A', width: '23%', left: '4%', nodeClick: false, roam: false, levels: [{color: ['lightblue'], itemStyle: {gapWidth: 4}}], data: [ {name: 'A1', value: 40}, {name: 'A2', value: 6}, {name: 'A3', value: 24}, {name: 'A4', value: 15}, {name: 'A5', value: 12}, {name: 'A6', value: 4}, {name: 'A7', value: 18} ] }, { type: 'treemap', name: 'CATEGORY B', width: '23%', left: '30%', nodeClick: false, roam: false, levels: [{color: ['lightgreen'], itemStyle: {gapWidth: 4}}], data: [ {name: 'B1', value: 13}, {name: 'B2', value: 17}, {name: 'B3', value: 8}, {name: 'B4', value: 24}, {name: 'B5', value: 15}, {name: 'B6', value: 10}, {name: 'B7', value: 24} ] }, { type: 'treemap', name: 'CATEGORY C', width: '23%', left: '56%', nodeClick: false, roam: false, levels: [{color: ['green'], itemStyle: {gapWidth: 4}}], data: [ {name: 'C1', value: 4}, {name: 'C2', value: 20}, {name: 'C3', value: 6}, {name: 'C4', value: 18}, {name: 'C5', value: 22}, {name: 'C6', value: 35}, ] }, { type: 'treemap', name: 'CATEGORY D', width: '16%', left: '82%', nodeClick: false, roam: false, levels: [{color: ['orange'], itemStyle: {gapWidth: 4}}], data: [ {name: 'D1', value: 7}, {name: 'D2', value: 19}, {name: 'D3', value: 12}, {name: 'D4', value: 11}, {name: 'D5', value: 4}, {name: 'D6', value: 9}, ] } ] };