ECharts: Display Legend for Treemap?

Question

The treemap below has two levels. I want to display a legend for the top level nodes (Node A and Node B). With other types of charts I've used, the legend can be auto-generated or I can define it explicitly. With the treemap, it appears one is not auto-generated, and if I define one explicitly, it is never displayed. Is it possible to display a legend for a treemap?

<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

The legend object of ECharts is constructed from the series object by default. This means that nested datas in treemap series aren't part of the legend. You need to make two entries in your series: one for Node A, one for Node B.

So you can first use the code below, and you'd see that you run into an UI-related issue.

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

This code will run, but the legend <-> chart sync will not work properly since ECharts doesn't support multiselect mode legend for the treemap object (it's a bit technical). Basically, you can only use single-selection mode as of the current ECharts version.

To get rid of the weird UI issue, you will either have to remove the legends (since the name already describes each block in the map so you might not need any legend), or add the following line inside the legend object:

selectedMode: 'single'

This will allow you to have a properly working legend, but this will not allow you to display two series at the same time. At least, you will be able to switch between your entries in your series array.

Here is a demo screenshot on the official editor: Echarts demo