了解百度ECharts中的`treemap.data.label.formatter`

时间:2018-05-23 17:15:01

标签: javascript charts echarts

在ECharts的treemap.data.label.formatter文档中,它解释如下:

{@xxx}: the value of a dimension named'xxx', for example,{@product}refers the value of'product'` dimension。

假设我有以下数据:

    data: [
            { 
                name: 'Region1',
                children: [
                    {
                         name: 'Region1-Country1',
                         // Option 1; I can make this work by using `formatter: '{b} brand count => {@[1]}'`

                         value: [800, 8], //here, '1000' is $ spend and '8' is brand count
                         // Option 2
                         value: {'brand':8, 'value':800},

                         // Option 3
                         brand: 8,
                         label: {
                                 show: true,
                                 formatter: '{b} brand count => {@??}' // WHAT should I use after '@'?
                        },
                         children: [
                            { name: 'Region1-Country1-Brand1', value: 200 },
                            { name: 'Region1-Country1-Brand2', value: 500 },
                         ]
                    },
                    {
                         name: 'Region1-Country2', 
                         value: 500, 
                         children: [
                            { name: 'Region1-Country2-Brand1', value: 100 },
                            { name: 'Region1-Country2-Brand2', value: 200 },
                            { name: 'Region1-Country2-Brand3', value: 200 },
                         ]
                    },
                ]
            },
       ]

根据上述文档中的说明,如何准备data数组,以便在绘制的地图中使用formatter: '{b} brand count => {@brand}'并显示Region1-Country1 brand count => 8

1 个答案:

答案 0 :(得分:1)

我想我找到了答案。在此发布与社区分享。

我们需要在dimensions而不是series中设置series.data。换句话说,如果我们这样做:

    series: [{
        name: 'Root',
        type: 'treemap',
        dimensions: ['value','brand'],
        visibleMin: 300,
        leafDepth: 2, 
        levels: [...] // skipped the details for `levels` here
        data: [
                { 
                    name: 'Region1',
                    brand: 9,
                    children: [
                        {
                             name: 'Region1-Country1',
                             value: [1000,8], // we can define dimensions like here: https://ecomfe.github.io/echarts-doc/public/en/option.html#dataset.dimensions
                            label: {
                            show: true,
                                formatter: '{b} brand count => {@brand}',
                            },
                             children: [
                                { name: 'Region1-Country1-Brand1', value: 200 },
                                { name: 'Region1-Country1-Brand2', value: 500 },
                             ]
                        },
                    ]
                },
              ]
            }]

那会有效(我已经测试过了)。我通过阅读ECharts不同部分的this来得出这个答案。文档。