Le code ci-dessous est un exemple d'utilisation du treemap d'Echart, je souhaite que chaque série soit disposée dans l'ordre vertical, puis connectée à chaque série, puis redimensionnée en fonction des données.
Dans cet exemple, chaque série sera classée aléatoirement selon sa taille.
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
}
]
})
);
});
C'est le résultat que j'attendais. Entrez la description de l'image ici
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pour autant que je sache, cela ne semble pas possible pour le moment. Vous pouvez affecter la forme de la zone via l'attribut
squareRatio, mais je ne peux pas l'aligner verticalement.Si vous n'avez pas besoin de panoramique et de zoom, vous pouvez placer un treemap pour chaque catégorie et ajuster la position en conséquence (par exemple :
gauche : '20%') et Tailleleft: '20%'）和大小（例如：width: '25%'(par exemple :largeur : '25%').Voici un exemple :
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}, ] } ] };