我正在尝试用echarts创建动态桑基图。我有一个案例,我有很多数据,但我的图表并不真正可读,正如您在图像中看到的那样(出于隐私原因,我隐藏了节点名称)。
这是我的选择:
var option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
formatter: function (params) {
if (params.dataType === 'edge') {
return `${params.data.color}<br>${params.data.source} --> ${params.data.target} : <b>${formatNumber(params.data.trueValue, formatLocale(lang))}</b>`;
}
else {
return `${params.data.tooltip_text}`;
}
}
},
legend: {},
backgroundColor: '{{backgroundColor}}',
dataZoom: [
{
type: 'slider',
show: true,
}
],
series: {
type: 'sankey',
layout: 'none',
layoutIterations: 0,
nodeGap: 8,
nodeWidth: 20,
labelLayout: {
hideOverlap: true
},
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradient',
curveness: 0.4
},
label: {
show: false,
position: 'right',
distance: 10,
},
data : {{{convertJS data}}},
links: {{{convertJS links}}},
}
};
以下是节点格式化的示例:
[
{
color: 'Inconsistent node',
name: "Electricity meter TD",
parents: [
"Electricity meter 1 D",
"Electricity meter 2 D",
"Photovoltaic electricity meter D"
],
tooltip: 'Inconsistent node<br>Sum of datapoints : 2.636<br>Sum of children : 2,599',
type: 'LT_ELEC',
itemStyle: { color: '#ffb77f' },
tooltip_text: 'Inconsistent node<br>Sum of datapoints : 2.636<br>Sum of children : 2,599'
},
{
color: 'Inconsistent node',
name: "Electricity meter -2 (D)",
parents: [
"Electricity meter 1 D"
],
tooltip: 'Inconsistent node<br>Sum of datapoints : 30.69<br>Sum of children : 1,003',
type: 'LT_ELEC',
itemStyle: { color: '#ffb77f' },
tooltip_text: 'Inconsistent node<br>Sum of datapoints : 30.69<br>Sum of children : 1,003'
},
]
以下是链接格式的示例:
links : [
{
color: 'Electrical flow',
source: "Electricity meter 1 D",
target: "Electricity meter TD",
value: 100,
lineStyle: { color: '#d8db14', opacity: 0.5 },
trueValue: 0
},
{
color: 'Electrical flow',
source: "Electricity meter 1 D",
target: 'Electricity meter -2 (D)',
value: 190.66666666666669,
lineStyle: { color: '#d8db14', opacity: 0.5 },
trueValue: 90.66666666666667
}
]
您还应该知道我按类型对节点进行了排序。
有谁知道我可以做些什么来改进渲染?因为某些节点只有一种类型的链接,因此可以将它们放置在其他地方。这是一个使图表更具可读性的更改示例(我通过拖动节点制作了此示例)。
提前致谢!
我有一个问题:你是如何在桑基图中创建图例的?当您单击其中一个图例时,该台阶以及由此构建的所有台阶都会掉落?