树形图

描述:当前是关于Echarts图表中的 树图 示例。
 
            var data = {
    "name": "辽宁省",
    "children": [{
            "name": "大连市",
            "category": "tree2",
            label: {
                normal: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'white' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    borderColor: 'blue',
                    borderWidth: 2,
                    shadowColor: 'rgba(0, 0, 0, 1)',
                    shadowBlur: 10
                },
                emphasis: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'white' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            },
            "children": [{
                    "name": "甘井子区",
                    "children": [{
                            "name": "生态科技创新城",
                            "value": 4294
                        },
                        {
                            "name": "大连甘井子工业园区",
                            "value": 9800
                        },
                        {
                            "name": "大连普利文化产业基地",
                            "value": 1314
                        },
                        {
                            "name": "大连湾临海装备制造集散区",
                            "value": 2220
                        }
                    ]
                },
                {
                    "name": "沙河口区",
                    "children": [{
                        "name": "软件园",
                        "value": 4294
                    }, {
                        "name": "星海湾商业区",
                        "value": 5960
                    }],
                },
                {
                    "name": "中山区",
                    "value": 2165
                }, {
                    "name": "旅顺口区",
                    "value": 2165
                }, {
                    "name": "西岗区",
                    "value": 2165
                }, {
                    "name": "金州",
                    "value": 2165
                }
            ]
        },
        {
            "name": "沈阳市",
            "category": "tree1",
            label: {
                normal: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'white' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    borderColor: 'blue',
                    borderWidth: 2,
                    shadowColor: 'rgba(0, 0, 0, 1)',
                    shadowBlur: 10
                },
                emphasis: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'white' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            },
        },
        {
            "name": "营口",
            "category": "tree1",
            label: {
                normal: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'white' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    borderColor: 'blue',
                    borderWidth: 2,
                    shadowColor: 'rgba(0, 0, 0, 1)',
                    shadowBlur: 10
                },
                emphasis: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'white' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            },
        },
        {
            "name": "葫芦岛",
            "category": "tree1",
            label: {
                normal: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'white' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    borderColor: 'blue',
                    borderWidth: 2,
                    shadowColor: 'rgba(0, 0, 0, 1)',
                    shadowBlur: 10
                },
                emphasis: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'white' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            },
        },
        {
            "name": "铁岭",
            "category": "tree1",
            label: {
                normal: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'white' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    borderColor: 'blue',
                    borderWidth: 2,
                    shadowColor: 'rgba(0, 0, 0, 1)',
                    shadowBlur: 10
                },
                emphasis: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'white' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            },
        },

    ]
};
myChart.setOption(option = {
      title: {
        text: "辽宁省",  
        subtext:'虚拟数据'},
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    series: [{
        type: 'tree',
        initialTreeDepth: -1,
        data: [data],

        top: '1%',
        left: '7%',
        bottom: '1%',
        right: '20%',

        symbolSize: 10,

        label: {
            normal: {
                position: 'top',
                verticalAlign: 'middle',
                align: 'right',
                color: 'black'
            }
        },

        leaves: {
            label: {
                normal: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left',
                }
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: 'red' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'blue' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            },
        },


    }]
});