矩形树图echarts treemap配置项内容和展示

矩形树图

      var mapData = [
    {
        "value": [
            250,
            null,
            null
        ],
        "name": "level1",
        "id": "branch-1",
        "discretion": null,
        "children": [
            {
                "value": [
                    100,
                    null,
                    null
                ],
                "name": "level2",
                "id": "leaf-1-1",
                "discretion": "net interest",
                "children": [
                    {
                        "value": [
                            70,
                            null,
                            null
                        ],
                        "name": "level3",
                        "id": "leaf-1-1-1",
                        "discretion": "net interest"
                    },
                    {
                        "value": [
                            30,
                            null,
                            null
                        ],
                        "name": "level3",
                        "id": "leaf-1-1-1",
                        "discretion": "net interest"
                    }
                ]
            },
            {
                "value": [
                    150,
                    null,
                    null
                ],
                "name": "level2",
                "id": "leaf-1-2",
                "discretion": "net interest",
                "children": [
                    {
                        "value": [
                            100,
                            null,
                            null
                        ],
                        "name": "level3",
                        "id": "leaf-1-2-1",
                        "discretion": "net interest"
                    },
                    {
                        "value": [
                            50,
                            null,
                            null
                        ],
                        "name": "level3",
                        "id": "leaf-1-2-1",
                        "discretion": "net interest"
                    }
                ]
            }
        ]
    },
    {
        "value": [
            600,
            null,
            null
        ],
        "name": "level1",
        "id": "branch-2",
        "discretion": null,
        "children": [
            {
                "value": [
                    300,
                    null,
                    null
                ],
                "name": "level2",
                "id": "leaf-2-1",
                "discretion": "net interest",
                "children": [
                    {
                        "value": [
                            150,
                            null,
                            null
                        ],
                        "name": "level3",
                        "id": "leaf-2-1-1",
                        "discretion": "net interest"
                    },
                    {
                        "value": [
                            150,
                            null,
                            null
                        ],
                        "name": "level3",
                        "id": "leaf-2-1-1",
                        "discretion": "net interest"
                    }
                ]
            },
            {
                "value": [
                    300,
                    null,
                    null
                ],
                "name": "level2",
                "id": "leaf-2-2",
                "discretion": "net interest",
                "children": [
                    {
                        "value": [
                            150,
                            null,
                            null
                        ],
                        "name": "level3",
                        "id": "leaf-2-2-1",
                        "discretion": "net interest"
                    },
                    {
                        "value": [
                            150,
                            null,
                            null
                        ],
                        "name": "level3",
                        "id": "leaf-2-2-1",
                        "discretion": "net interest"
                    }
                ]
            }
        ]
    },
    {
        "value": [
            100,
            null,
            null
        ],
        "name": "level1",
        "id": "branch-3",
        "discretion": null
    }
];
var option = {
    series: {
        type: 'treemap',
        name: 'root',
        data: mapData,
        upperLabel: {
            show: true,
            height: 60,
            textBorderColor: '',
            formatter: function (param) {
                iconsArr = ['iconDown', 'iconUp', 'iconKeep'];
                return [
                    '{title| ' +
                        param.name +
                        ' }' +
                        '{DIN|' +
                        param.data.value[0] +
                        '}' +
                        '比例' +
                        '{' +
                        iconsArr[1] +
                        '|}' +
                        '{cont|' +
                        param.data.value[0] +
                        '}' +
                        '{cont|%}',
                    '占比1 ' +
                        '{cont|' +
                        param.data.value[0] +
                        '}' +
                        '%' +
                        '  比率1' +
                        '{' +
                        iconsArr[1] +
                        '|}' +
                        '{cont|' +
                        param.data.value[0] +
                        '}' +
                        '{cont|%}' +
                        '    占比2 ' +
                        '{cont|' +
                        param.data.value[0] +
                        '}' +
                        '%' +
                        '  比率2' +
                        '{' +
                        iconsArr[1] +
                        '|}' +
                        '{cont|' +
                        param.data.value[0] +
                        '}' +
                        '{cont|%}',
                ].join('\n');
            },
            rich: {
                title: {
                    fontSize: 14,
                    backgroundColor: 'rgba(0,0,0,0.4)',
                    color: '#fff',
                    borderRadius: 2,
                    padding: [3, 4],
                    lineHeight: 25,
                    align: 'left',
                },
                DIN: {
                    fontSize: 15,
                    fontFamily: 'myDIN',
                    padding: [2, 10],
                },
                cont: {
                    fontSize: 12,
                    fontWeight: 700,
                    lineHeight: 25,
                    align: 'left',
                },
            },
        },
        label: {
            position: 'insideTopLeft',
            color: '#333',
            formatter: function (param) {
                iconsArr = ['iconDown', 'iconUp', 'iconKeep'];
                return [
                    '{title| ' + param.name + ' }' + '{DIN|',
                    param.data.value[0] +
                        '}' +
                        '比率' +
                        '{' +
                        iconsArr[1] +
                        '|}' +
                        '{cont|' +
                        param.data.value[0] +
                        '}' +
                        '{cont|%}',
                    '占比1 ' + '{cont|' + param.data.value[0] + '}' + '%',
                    '比率1' + '{' + iconsArr[2] + '|}' + '{cont|' + param.data.value[0] + '}' + '{cont|%}',
                    '占比2 ' + '{cont|' + param.data.value[0] + '}' + '%',
                    '比率2' + '{' + iconsArr[0] + '|}' + '{cont|' + param.data.value[0] + '}' + '{cont|%}',
                ].join('\n');
            },
            rich: {
                title: {
                    fontSize: 14,
                    backgroundColor: 'rgba(0,0,0,0.4)',
                    color: '#fff',
                    borderRadius: 2,
                    padding: [3, 4],
                    lineHeight: 25,
                    align: 'left',
                },
                DIN: {
                    fontSize: 15,
                    fontFamily: 'myDIN',
                    padding: [2, 3],
                },
                cont: {
                    fontSize: 12,
                    fontWeight: 700,
                    lineHeight: 25,
                    align: 'left',
                },
            },
        },
        itemStyle: {
            color: '#333',
            borderColor: 'black',
        },
        levels: [
            {
                color: ['#81d0f5', '#4ac694', '#a66ece'],
                colorMappingBy: 'id',
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 0,
                    gapWidth: 1,
                },
                upperLabel: {
                    show: false,
                },
            },
            {
                itemStyle: {
                    borderColor: '#ddd',
                    borderWidth: 5,
                    gapWidth: 1,
                    borderColorSaturation: 0.55,
                },
            },
            {
                colorSaturation: [0.9],
                itemStyle: {
                    borderWidth: 5,
                    gapWidth: 1,
                    borderColorSaturation: 0.7,
                },
            },
        ],
    },
};