Echarts桑基图渲染

问题描述 投票:0回答:1

我正在尝试用echarts创建动态桑基图。我有一个案例,我有很多数据,但我的图表并不真正可读,正如您在图像中看到的那样(出于隐私原因,我隐藏了节点名称)。

sankey_diagram

这是我的选择:

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
  }
]

您还应该知道我按类型对节点进行了排序。

有谁知道我可以做些什么来改进渲染?因为某些节点只有一种类型的链接,因此可以将它们放置在其他地方。这是一个使图表更具可读性的更改示例(我通过拖动节点制作了此示例)。

sankey_diagram_readable

提前致谢!

javascript echarts sankey-diagram
1个回答
0
投票

我有一个问题:你是如何在桑基图中创建图例的?当您单击其中一个图例时,该台阶以及由此构建的所有台阶都会掉落?

© www.soinside.com 2019 - 2024. All rights reserved.