美文网首页
Echars横向的树状图

Echars横向的树状图

作者: 甘道夫老矣 | 来源:发表于2019-06-20 14:39 被阅读0次
    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);
            
    

    相关文章

      网友评论

          本文标题:Echars横向的树状图

          本文链接:https://www.haomeiwen.com/subject/ueadqctx.html