英文:
How to create vertically connected tree map via Echart
问题
以下是使用Echart绘制树图的示例代码。我期望的效果是将每个系列按垂直顺序连接起来,并根据数据进行大小调整。
在这个示例中,每个系列将按其大小随机排列。
https://echarts.apache.org/examples/en/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: 'Disk Usage',
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>',
'Disk Usage: ' + formatUtil.addCommas(value) + ' KB'
].join('');
}
},
series: [
{
name: 'Disk Usage',
type: 'treemap',
visibleMin: 300,
label: {
show: true,
formatter: '{b}'
},
itemStyle: {
borderColor: '#fff'
},
levels: getLevelOption(),
data: diskData
}
]
})
);
});
这是我期望的效果。
enter image description here
英文:
This code below is the example of treemap using Echart, what i expect is to order each series vertically and then connected to each series, then sizing by the data.
In this example, each series will randomly arrange by its size
https://echarts.apache.org/examples/en/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: 'Disk Usage',
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>',
'Disk Usage: ' + formatUtil.addCommas(value) + ' KB'
].join('');
}
},
series: [
{
name: 'Disk Usage',
type: 'treemap',
visibleMin: 300,
label: {
show: true,
formatter: '{b}'
},
itemStyle: {
borderColor: '#fff'
},
levels: getLevelOption(),
data: diskData
}
]
})
);
});
This is what I expected.
enter image description here
答案1
得分: 0
据我所知,目前似乎不可能实现。您可以通过squareRatio
属性来影响区域的形状,但我无法使其垂直对齐。
如果您不需要平移和缩放,您可以为每个类别放置一个矩形树图,并相应地调整position(例如left: '20%'
)和size(例如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},
]
}
]
};
英文:
As far as I can tell it is currently not possible. You can impact the shape of the regions via the squareRatio
property but I couldnt get it aligned vertically.
If you dont need to pan and zoom you could put one treemap for each categorie and adjust the position (eg. left: '20%'
) and size (eg. width: '25%'
) accordingly.
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},
]
}
]
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论