legend - 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 相关的问题。

{
  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版本基本上只能使用单选模式。

要摆脱奇怪的 UI 问题，您要么必须删除图例(因为 name 已经描述了 map 中的每个 block ，因此您可能不需要任何图例)，或者添加legend 对象中的以下行:

selectedMode: 'single'

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

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