sxt.png

 let option = {
            series : [
              {
                top: "0%",
                left: "5%",
                bottom: "0%",
                right: "10%",
                name:'树图',
                type:'tree',
                expandAndCollapse: false,//不缩放
                rootLocation: {x: 'center',y: 'center'},
                nodePadding: 50,
                initialTreeDepth: 10,
                symbol: 'rect',
                itemStyle: {
                  normal: {
                    color:'#23366E',
                    borderWidth:0,
                    lineStyle: {
                      color: '#1E2F62',
                      curveness: 0.7,
                      width: 1,
                      type: 'solid'
                    }
                  },
                },
                label:{ //内容位置等属性
                  normal: {
                    verticalAlign: 'middle',
                    align: 'center',
                    fontSize: 12,
                    color:'white'
                  },
                },
                //鼠标移上去样式
                emphasis: {
                  label: {
                    show: true,
                    color:'red',
                  },
                },
                data: [
                  {
                    name: '霸\n气\n侧\n漏\n的\n树\n形\n图',
                    value: 10,
                    symbolSize: [60, 500],
                    label:{
                      fontSize: 20,
                    },
                    initialTreeDepth: 4,
                    // 二级
                    children: [
                      {
                        name: '社会经济1',
                        value: 4,
                        symbolSize: [280, 40],
                        label:{
                          fontSize: 18,
                        },
                        children: [
                          {name: '人口聚集度11', value: 4, symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children: [
                              {name: '人口密度111',value: 4,symbolSize: [150, 20]},
                              {name: '人口流动强度112',value: 4,symbolSize: [150, 20]}
                            ]
                          },
                          {name: '经济发展水12',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度121',value: 4,symbolSize: [150, 20]},
                              {name: '人口流动强度122',value: 4,symbolSize: [150, 20]}
                            ]
                          },
                          {name: '交通优势度13',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度131',value: 4,symbolSize: [150, 20]},
                              {name: '人口流动强度132',value: 4,symbolSize: [150, 20]}
                            ]
                          }

                        ]
                      },
                      {
                        name: '资源承载力2',
                        value: 4,
                        symbolSize: [280, 50],
                        label:{
                          fontSize: 16,
                        },
                        children: [
                          {name: '交通优势度21',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度211',value: 4,symbolSize: [150, 20]},
                              {name: '人口流动强度212',value: 4,symbolSize: [150, 20]}
                            ]
                          },
                          {name: '交通优势度22',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度221',value: 4,symbolSize: [150, 20]},
                              {name: '人口流动强度223',value: 4,symbolSize: [150, 20]}
                            ]
                          }
                        ]

                      },
                      {
                        name: '环境破3',
                        value: 4,
                        symbolSize: [280, 50],
                        label:{
                          fontSize: 16,
                        },
                        children: [
                          {name: '交通优势度31',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度311',value: 4,symbolSize: [150, 20]},
                              {name: '人口流动强度322',value: 4,symbolSize: [150, 20]}
                            ]
                          },
                          {name: '交通优势度32',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度PD321',value: 4,symbolSize: [150, 20]},
                              {name: '人口流动强度322',value: 4,symbolSize: [150, 20]}
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);