ECharts：树形图的显示图例？

Question

下面的树状图有两层。我想显示顶级节点（节点 A 和节点 B）的图例。对于我使用过的其他类型的图表，图例可以自动生成，也可以明确定义。使用树状图，看起来一个不是自动生成的，如果我明确定义一个，它永远不会显示。是否可以显示树状图的图例？

<style>
    #chart {
        position: absolute;
        border: 1px solid;
        top: 100px;
        left: 100px;
        right: 100px;
        bottom: 100px;
        border: 1px solid black;
    }
</style>


<div id="chart"></div>


<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<script>
    var options = {
        series: [{
            type: 'treemap',
            data: [{
                name: 'Node A',
                value: 20,
                children: [{
                    name: 'Node A1',
                    value: 12
                }, {
                    name: 'Node A2',
                    value: 8
                }]
            }, {
                name: 'Node B',
                value: 20,
                children: [{
                    name: 'Node B1',
                    value: 20
                }]
            }]
        }]
    };
    var chart = echarts.init(document.getElementById("chart"));
    chart.setOption(options);
</script>

Answer 1

ECharts的legend对象默认是由series对象构造而成。这意味着 treemap 系列中的嵌套数据不是图例的一部分。您需要在 series 中输入两项：一项用于 Node A，一项用于 Node B。

所以你可以先使用下面的代码，你会发现你运行陷入了 UI-related 问题。

{
  legend: {
    data: ['Node A', 'Node B'],
    top: 55,
    itemGap: 5,
    backgroundColor: 'rgb(243,243,243)',
    borderRadius: 5
  },
  series: [
    {
      type: 'treemap',
      name: 'Node A',
      data: [{
        name: 'Node A1',
        value: 12,
      }, {
        name: 'Node A2',
        value: 8,
      }]
    }, {
      type: 'treemap',
      name: 'Node B',
      data: [{
        name: 'Node B1',
        value: 20,
      }]
    }
  ]
}

此代码会运行，但图例<->图表同步将无法正常工作，因为ECharts 不支持treemap 对象的多选模式图例（这有点技术性）。目前ECharts版本基本上只能使用single-selection模式

要摆脱奇怪的 UI 问题，您要么必须删除图例（因为 name 已经描述了地图中的每个块，因此您可能不需要任何图例），或在 legend 对象中添加以下行：

selectedMode: 'single'

这将允许您有一个正常工作的图例，但这将不允许您同时显示两个系列。至少，您将能够在 series 数组中的条目之间切换。

这是官方编辑器上的演示截图： Echarts demo

ECharts：树形图的显示图例？

ECharts: Display Legend for Treemap?

legend

treemap

echarts