The code below is an example of using Echart's treemap. I want each series to be arranged in vertical order, then connected to each series, and then resized according to the data.
In this example, each series will be randomly ordered by its size.
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
}
]
})
);
});
This is the result I expect. Enter image description here
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
As far as I know, it seems impossible at the moment. You can affect the shape of the area via the
squareRatioproperty, but I can't align it vertically.If you don't need panning and zooming, you can place a treemap for each category and adjust the position accordingly (eg:
left: '20%') and Size (for example:width: '25%').Here is an example:
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}, ] } ] };