如何设置TreeMap的板块的背景图片

[zhnlk]

One-line summary [问题简述]

要把400+个logo，用TreeMap分别用归属的地区展示出来
发现在配置项里仅有background-color的选项

现在的echarts支持嘛？我该怎样做才能实现~？
谢谢

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:
  4.2.0

Expected behaviour [期望结果]

http://d3plus.org/examples/d3plus-hierarchy/background-image/
d3中有个插件做的这个这样的效果

Other comments [其他信息]

[sxmpasch]

你可以通过使用“formatter”和“rich”来实现这样的目标。

You can achieve something like that by using a formatter and rich:

var richIcons = {
    nodeAa: {
        height: '120',
        backgroundColor: {
            image: './data/asset/img/weather/sunny_128.png'
        }
    },
    nodeAb: {
        height: 120,
        backgroundColor: {
            image: './data/asset/img/weather/cloudy_128.png'
        }
    },
    nodeBa1: {
        height: 260,
        backgroundColor: {
            image: './data/asset/img/weather/showers_128.png'
        }
    }
};

option = {
    series: [{
        type: 'treemap',
        label: {
          normal: {
                formatter: function (params) {
                    return '{' + params.name + '|}';
                },
                rich: richIcons,
            },
        },
        data: [{
            name: 'nodeA',            // First tree
            value: 10,
            children: [{
                name: 'nodeAa',       // First leaf of first tree
                value: 4
            }, {
                name: 'nodeAb',       // Second leaf of first tree
                value: 6
            }]
        }, {
            name: 'nodeB',            // Second tree
            value: 17,
            children: [{
                name: 'nodeBa',       // Son of first tree
                value: 20,
                children: [{
                    name: 'nodeBa1',  // Granson of first tree
                    value: 20,
                }]
            }]
        }]
    }]
};

[zhnlk]

@sxmpasch 感谢

[xxBingoBongoxx]

You can achieve this goal by using "formatter" and "rich".

You can achieve something like that by using a formatter and rich:

var richIcons = {
    nodeAa: {
        height: '120',
        backgroundColor: {
            image: './data/asset/img/weather/sunny_128.png'
        }
    },
    nodeAb: {
        height: 120,
        backgroundColor: {
            image: './data/asset/img/weather/cloudy_128.png'
        }
    },
    nodeBa1: {
        height: 260,
        backgroundColor: {
            image: './data/asset/img/weather/showers_128.png'
        }
    }
};

option = {
    series: [{
        type: 'treemap',
        label: {
          normal: {
                formatter: function (params) {
                    return '{' + params.name + '|}';
                },
                rich: richIcons,
            },
        },
        data: [{
            name: 'nodeA',            // First tree
            value: 10,
            children: [{
                name: 'nodeAa',       // First leaf of first tree
                value: 4
            }, {
                name: 'nodeAb',       // Second leaf of first tree
                value: 6
            }]
        }, {
            name: 'nodeB',            // Second tree
            value: 17,
            children: [{
                name: 'nodeBa',       // Son of first tree
                value: 20,
                children: [{
                    name: 'nodeBa1',  // Granson of first tree
                    value: 20,
                }]
            }]
        }]
    }]
};

It doesn't work

[sxmpasch]

The image paths are from 2018. You need to replace them:

var richIcons = {
    nodeAa: {
        height: '120',
        backgroundColor: {
            image: ROOT_PATH + '/data/asset/img/weather/sunny_128.png'
        }
    },
    nodeAb: {
        height: 120,
        backgroundColor: {
            image: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png'
        }
    },
    nodeBa1: {
        height: 260,
        backgroundColor: {
            image: ROOT_PATH + '/data/asset/img/weather/showers_128.png'
        }
    }
};

option = {
    series: [{
        type: 'treemap',
        label: {
          normal: {
                formatter: function (params) {
                    return '{' + params.name + '|}';
                },
                rich: richIcons,
            },
        },
        data: [{
            name: 'nodeA',            // First tree
            value: 10,
            children: [{
                name: 'nodeAa',       // First leaf of first tree
                value: 4
            }, {
                name: 'nodeAb',       // Second leaf of first tree
                value: 6
            }]
        }, {
            name: 'nodeB',            // Second tree
            value: 17,
            children: [{
                name: 'nodeBa',       // Son of first tree
                value: 20,
                children: [{
                    name: 'nodeBa1',  // Granson of first tree
                    value: 20,
                }]
            }]
        }]
    }]
};

[xxBingoBongoxx]

The image paths are from 2018. You need to replace them:

var richIcons = {
    nodeAa: {
        height: '120',
        backgroundColor: {
            image: ROOT_PATH + '/data/asset/img/weather/sunny_128.png'
        }
    },
    nodeAb: {
        height: 120,
        backgroundColor: {
            image: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png'
        }
    },
    nodeBa1: {
        height: 260,
        backgroundColor: {
            image: ROOT_PATH + '/data/asset/img/weather/showers_128.png'
        }
    }
};

option = {
    series: [{
        type: 'treemap',
        label: {
          normal: {
                formatter: function (params) {
                    return '{' + params.name + '|}';
                },
                rich: richIcons,
            },
        },
        data: [{
            name: 'nodeA',            // First tree
            value: 10,
            children: [{
                name: 'nodeAa',       // First leaf of first tree
                value: 4
            }, {
                name: 'nodeAb',       // Second leaf of first tree
                value: 6
            }]
        }, {
            name: 'nodeB',            // Second tree
            value: 17,
            children: [{
                name: 'nodeBa',       // Son of first tree
                value: 20,
                children: [{
                    name: 'nodeBa1',  // Granson of first tree
                    value: 20,
                }]
            }]
        }]
    }]
};

Thanks for the answer. However there is another one: what am i supposed to define as ROOT_PATH? an absolute path to ./src?

[sxmpasch]

Ok, the links for the icons are adapted to the example section of the echarts homepage. Just go to one of the examples and replace the source code on the left with this code snippet. ROOT_PATH is a variable used only there...
You just need to replace the links with anything pointing to the correct location of your own images.