下面的程式碼是使用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 [ '' + formatUtil.encodeHTML(treePath.join('/')) + '', '磁盘使用情况: ' + 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}, ] } ] };