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

默认情况下，legend对象ECharts是从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已经描述了映射中的每个块，因此您可能不需要任何图例)，或者在legend对象中添加以下行：

selectedMode: 'single'

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

以下是官方编辑器的演示屏幕截图：电子图表演示