tree diagram

option = {

    title : {

        text: 'Mobile phone brand',

        subtext: 'Line, node style'

    },

    tooltip : {

        trigger: 'item',

        formatter: "{b}: {c}"

    },

    toolbox: {

        show : true,

        feature : {

            mark : {show: true},

            dataView : {show: true, readOnly: false},

            restore : {show: true},

            saveAsImage : {show: true}

        }

    },

    calculable : false,

 

    series : [

        {

            name: 'tree map',

            type:'tree',

            orient: 'horizontal',  // vertical horizontal

            rootLocation: {x: 100, y: '60%'}, // root node location {x: 'center',y: 10}

            nodePadding: 20,

            symbol: 'circle',

            symbolSize: 40,

            itemStyle: {

                normal: {

                    label: {

                        show: true,

                        position: 'inside',

                        textStyle: {

                            color: '#cc9999',

                            fontSize: 15,

                            fontWeight:  'bolder'

                        }

                    },

                    lineStyle: {

                        color: '#000',

                        width: 1,

                        type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'

                    }

                },

                emphasis: {

                    label: {

                        show: true

                    }

                }

            },

            data: [

                {

                    name: 'phone',

                    value: 6,

                    symbolSize: [90, 70],

                    symbol: 'image://http://www.iconpng.com/png/ecommerce-business/iphone.png',

                    itemStyle: {

                        normal: {

                            label: {

                                show: false

                            }

                        }

                    },

                    children: [

                        {

                            name: 'Xiaomi',

                            value: 4,

                            symbol: 'image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg',

                            itemStyle: {

                                normal: {

                                    label: {

                                        show: false

                                    }

                                }

                            },

                            symbolSize: [60, 60],

                            children: [

                                {

                                    name: 'Xiaomi 1',

                                    symbol: 'circle',

                                    symbolSize: 20,

                                    value: 4,

                                    itemStyle: {

                                        normal: {

                                            color: '#fa6900',

                                            label: {

                                                show: true,

                                                position: 'right'

                                            },

                                            

                                        },

                                        emphasis: {

                                            label: {

                                                show: false

                                            },

                                            borderWidth: 0

                                        }

                                    }

                                },

                                {

                                    name: 'Xiaomi 2',

                                    value: 4,

                                    symbol: 'circle',

                                    symbolSize: 20,

                                    itemStyle: {

                                        normal: {

                                            label: {

                                                show: true,

                                                position: 'right',

                                                formatter: "{b}"

                                            },

                                            color: '#fa6900',

                                            borderWidth: 2,

                                            borderColor: '#cc66ff'

 

                                        },

                                        emphasis: {

                                            borderWidth: 0

                                        }

                                    }

                                },

                                {

                                    name: 'Xiaomi 3',

                                    value: 2,

                                    symbol: 'circle',

                                    symbolSize: 20,

                                    itemStyle: {

                                        normal: {

                                            label: {

                                                position: 'right'

                                            },

                                            color: '#fa6900',

                                            brushType: 'stroke',

                                            borderWidth: 1,

                                            borderColor: '#999966',

                                        },

                                        emphasis: {

                                            borderWidth: 0

                                        }

                                    }

                                }

                            ]

                        },

                        {

                            name: 'apple',

                            symbol: 'image://http://www.viastreaming.com/images/apple_logo2.png',

                            symbolSize: [60, 60],

                            itemStyle: {

                                normal: {

                                    label: {

                                        show: false

                                    }

                                    

                                }

                            },

                            value: 4

                        },

                        {

                            name: 'Huawei',

                            symbol: 'image://http://market.huawei.com/hwgg/logo_cn/download/logo.jpg',

                            symbolSize: [60, 60],

                          children:[{

                                    name: 'Huawei 6 PLUS',

                                    value: 4,

                                    symbol: 'circle',

                                    symbolSize: 20,

                                    itemStyle: {

                                        normal: {

                                            label: {

                                                show: true,

                                                position: 'right',

                                                formatter: "{b}"

                                            },

                                            color: '#fa6900',

                                            borderWidth: 2,

                                            borderColor: '#cc66ff'

 

                                        },

                                        emphasis: {

                                            borderWidth: 0

                                        }

                                    }

                                },{

                                    name: 'Huawei Honor PLUS',

                                    value: 4,

                                    symbol: 'circle',

                                    symbolSize: 20,

                                    itemStyle: {

                                        normal: {

                                            label: {

                                                show: true,

                                                position: 'right',

                                                formatter: "{b}"

                                            },

                                            color: '#fa6900',

                                            borderWidth: 2,

                                            borderColor: '#cc66ff'

 

                                        },

                                        emphasis: {

                                            borderWidth: 0

                                        }

                                    }

                                }],

                            itemStyle: {

                                normal: {

                                    label: {

                                        show: false

                                    }

                                    

                                }

                            },

                            value: 2

                        },

                        {

                            name: 'Lenovo',

                            symbol: 'image://http://www.lenovo.com.cn/HomeUpload/Home001/6d94ee9a20140714.jpg',

                            symbolSize: [100, 40],

                            itemStyle: {

                                normal: {

                                    label: {

                                        show: false

                                    }

                                    

                                }

                            },

                            value: 2

                        }

                    ]

                }

            ]

        }

    ]

};

                    

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326989533&siteId=291194637