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:{ //內(nèi)容位置等屬性
                  normal: {
                    verticalAlign: 'middle',
                    align: 'center',
                    fontSize: 12,
                    color:'white'
                  },
                },
                //鼠標(biāo)移上去樣式
                emphasis: {
                  label: {
                    show: true,
                    color:'red',
                  },
                },
                data: [
                  {
                    name: '霸\n氣\n側(cè)\n漏\n的\n樹\n形\n圖',
                    value: 10,
                    symbolSize: [60, 500],
                    label:{
                      fontSize: 20,
                    },
                    initialTreeDepth: 4,
                    // 二級
                    children: [
                      {
                        name: '社會(huì)經(jīng)濟(jì)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: '人口流動(dòng)強(qiáng)度112',value: 4,symbolSize: [150, 20]}
                            ]
                          },
                          {name: '經(jīng)濟(jì)發(fā)展水12',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度121',value: 4,symbolSize: [150, 20]},
                              {name: '人口流動(dòng)強(qiáng)度122',value: 4,symbolSize: [150, 20]}
                            ]
                          },
                          {name: '交通優(yōu)勢度13',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度131',value: 4,symbolSize: [150, 20]},
                              {name: '人口流動(dòng)強(qiáng)度132',value: 4,symbolSize: [150, 20]}
                            ]
                          }

                        ]
                      },
                      {
                        name: '資源承載力2',
                        value: 4,
                        symbolSize: [280, 50],
                        label:{
                          fontSize: 16,
                        },
                        children: [
                          {name: '交通優(yōu)勢度21',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度211',value: 4,symbolSize: [150, 20]},
                              {name: '人口流動(dòng)強(qiáng)度212',value: 4,symbolSize: [150, 20]}
                            ]
                          },
                          {name: '交通優(yōu)勢度22',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度221',value: 4,symbolSize: [150, 20]},
                              {name: '人口流動(dòng)強(qiáng)度223',value: 4,symbolSize: [150, 20]}
                            ]
                          }
                        ]

                      },
                      {
                        name: '環(huán)境破3',
                        value: 4,
                        symbolSize: [280, 50],
                        label:{
                          fontSize: 16,
                        },
                        children: [
                          {name: '交通優(yōu)勢度31',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度311',value: 4,symbolSize: [150, 20]},
                              {name: '人口流動(dòng)強(qiáng)度322',value: 4,symbolSize: [150, 20]}
                            ]
                          },
                          {name: '交通優(yōu)勢度32',value: 4,symbolSize: [250, 30],
                            label:{
                              fontSize: 16,
                            },
                            children:[
                              {name: '人口密度PD321',value: 4,symbolSize: [150, 20]},
                              {name: '人口流動(dòng)強(qiáng)度322',value: 4,symbolSize: [150, 20]}
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          };
          // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
          myChart.setOption(option);