树图构建组织结构--主动构建valueecharts treemap配置项内容和展示

2017/07 by liang

      var struct_colors = [
    '#ed6f6d', '#f3765d', '#f77a57', '#f98866', '#f99579',
    '#ff9f3b', '#f0a732', '#e6a840', '#e9b253', '#ebbb66',
    '#78b7e8', '#59b1f3', '#66bbf5', '#6ec3f2', '#75cae2',
    '#70cccc', '#5dc4c4', '#4dbebd', '#4cc1a7', '#4fca96',
    '#4cc686'
];
RICH = {
    name: {
        color: '#fff',
        fontSize: 24
    },
    basic: {
        color: '#fff',
        fontSize: 8,
        lineHeight: 16

    }
};
var info2 = {
    'children': [{
        'asset_num': 0,
        'name': '一级结构',
        'manage': 'liang-01',
    }, {
        'asset_num': 42,
        'name': 'fds-------test--------------------------yy----',
        'manage': 'liang-01',
    }, {
        'children': [{
            'name': '二级组织结构-1',
            'asset_num': 20,
            'manage': 'liang-01',
        }, {
            'name': '二级组织结构-2',
            'asset_num': 20,
            'manage': 'liang-01',
        }, {
            'children': [{
                'name': '三级-1',
                'asset_num': 10,
                'manage': 'liang-01',
            }, {
                'name': '三级-2',
                'asset_num': 20,
                'manage': 'liang-01',
            }],
            'name': '二级-03',
            'manage': 'liang-02',
        }],
        'asset_num': 10,
        'name': 'has children',
        'manage': 'liang-01',
    }, {
        'name': 'fds no children',
        'asset_num': 100,
        'manage': 'liang-01',
        // 'color': struct_colors[index],
    }]
};
var structs_datas = [];
var formatUtil = echarts.format;

function format_struct_data(children, structs_datas) {
    // 添加每个单位的颜色
    for (var prop in children) {
        var index = Math.floor(Math.random() * 20);
        var value = 1;
        if (children[prop].asset_num !== 0) {
            value = children[prop].asset_num;
        }
        var tmp = {
            itemStyle: {
                normal: {
                    color: struct_colors[index]
                }
            },
            name: children[prop].name,
            manage: children[prop].manage,
            children: [],
            asset_num: children[prop].asset_num,
            value: value
        }
        format_struct_data(children[prop].children, tmp.children);
        if (tmp.children.length === 0) {
            delete tmp.children;
        }
        structs_datas.push(tmp);
        // return structs_datas;

    }

}

function showMenu(param) {
    // 可在此处添加右击操作内容
    console.log('showMenu==============', param);
    var event = param.event;
    var pageX = event.offsetX;
    var pageY = event.offsetY;
    console.log('showMenu========', pageX, pageY);

}
format_struct_data(info2.children, structs_datas);
myChart.setOption(option = {
    title: {
        text: '树图构建组织结构',
        subtext: '2017/07 by liang',
        left: 'leafDepth'
    },
    tooltip: {

        formatter: function(info) {
            console.log('tool------', info);
            var asset_num = info.data.asset_num;
            var name = info.name;
            return [
                '<h4>' + name + '</>',
                '<div>资产数量：' + asset_num + '</>',
            ].join('\n');
            // return [
            //     '{name|' + name + '}',
            //     '{basic| 资产数量：' + asset_num + '}',
            // ].join('\n');
        },
        // rich: RICH, tooltip不支持富文本

    },

    series: [{
        name: 'org',
        type: 'treemap',
        visibleMin: 300,
        // data: format_struct_data(info2.children, structs_datas),
        data: structs_datas,
        leafDepth: 1,
        label: {
            normal: {
                show: true,
                position: 'insideTopLeft',
                formatter: function(a) {
                    console.log('formatter==label=======', a);
                    return '{name|' + a.name + '}' + "\n\n" + "{basic|资产数量 : " + a.data.asset_num + '}' + "\n" + '{basic|管理员 ： ' + a.data.manage + '}';
                    // return [
                    //     '<div><h1>' + a.name + '</h1></div>',
                    //     '<div><p>' + a.value + '</></div>',
                    // ].join('');
                },
                textStyle: {
                    // color: '',  label的字体颜色
                    fontSize: '14',
                    fontWeight: 'bold'
                },
                rich: RICH,

            },
            // emphasis: {
            //     show: true,
            //     position: 'insideTopLeft',
            //     formatter: function(a) {
            //         console.log('formatter===label======', a);
            //         return a.name + "\n\n" + "资产数量 : " + a.data.value + "\n等级得分";
            //     },
            //     textStyle: {
            //         fontSize: '14',
            //         fontWeight: 'bold'
            //     }
            // }
        },
        levels: [{
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    gapWidth: 2
                }
            }
        }, {
            itemStyle: {
                normal: {
                    gapWidth: 2
                }
            }
        }, {
            // colorSaturation: [0.35, 0.5],
            itemStyle: {
                normal: {
                    gapWidth: 2,
                    // borderColorSaturation: 0.6
                }
            }
        }],
        breadcrumb: {
            show: true,
            // "height": 22,
            left: "10%",
            top: "93%",
            emptyItemWidth: 25,
            itemStyle: {
                normal: {
                    color: "#fff",
                    borderColor: "rgba(255,255,255,0.7)",
                    borderWidth: 1,
                    shadowColor: "rgba(150,150,150,1)",
                    shadowBlur: 3,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    textStyle: {
                        color: "#000",
                        fontWeight: 'bold'
                    }
                },
                emphasis: {
                    textStyle: {}
                }
            }
        },
    }]
});

document.oncontextmenu = function() {
    return false;
};
myChart.on('contextmenu', showMenu);