echart.js type: 'tree', 树形不同级别 symbol linestyle设置

Question

目前只实现如下：

var data = {
    "name": "一级",
    "children": [
        {
            "name": "二级1",
            "children": [
                {"name": "三级1-1", "value": 4116}
            ]
        },
        {
            "name": "二级2",
            "children": [
                {"name": "三级2-1", "value": 2105},
                {"name": "三级2-2", "value": 1316},
                {"name": "三级2-3", "value": 3151},
                {"name": "三级2-4", "value": 3770},
                {"name": "三级2-5", "value": 2435},
                {"name": "三级2-6", "value": 4839},
                {"name": "三级2-7", "value": 2105},
                {"name": "三级2-8", "value": 1316},
                {"name": "三级2-9", "value": 3151},
                {"name": "三级2-10", "value": 3770},
                {"name": "三级2-11", "value": 2105},
                {"name": "三级2-12", "value": 1316},
                {"name": "三级2-13", "value": 3151},
                {"name": "三级2-14", "value": 3770},
                {"name": "三级2-15", "value": 2435},
                {"name": "三级2-16", "value": 4839}
           ]
        },
        {
            "name": "三级2-3",
            "children": [
                {"name": "三级3-1", "value": 8833}
           ]
        }
    ]
};
 myChart.setOption(option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',
                data: [data],
                top: '18%',
                bottom: '14%',
                layout: 'radial',
                symbol: 'circle',
                symbolSize: 20,
                initialTreeDepth: 2,
                animationDurationUpdate: 750,
                itemStyle:{
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0, color: '#108ee9' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#62b7f4' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    borderWidth:0
                },
                lineStyle:{
                   color: '#ff6600'
                }

            }
        ]
    });
    

效果如下：

想要实现效果如下：

Answer 1

传data格式：

var data = {
    "name": "一级",
    symbol: 'image://http://louruyue.notbad.cn/uploadimage/pic_201251143747.jpg',
    symbolSize:'45',
    symbolKeepAspect:true,
     itemStyle:{
            borderWidth:4,
            opacity:'0.9'
    } ,
    "children": [
        {
            "name": "二级1",
            value:'30',
            itemStyle:{ color: '#63d389'} ,
            lineStyle:{color: '#63d389'},
            "children": [
                {
                    "name": "三级1-1", 
                    itemStyle:{ color: '#63d389'} ,
                    lineStyle:{ color: '#63d389'},
                     "value": 4116
                    
                }
            ]
            
        },
        {
            "name": "二级2",
            itemStyle:{ color: '#7a84f5'} ,
            lineStyle:{color: '#7a84f5'},
            "children": [
                {"name": "三级2-1", "value": 2105,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-2", "value": 1316,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-3", "value": 3151,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-4", "value": 3770,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-5", "value": 2435,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-6", "value": 4839,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-7", "value": 2105,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-8", "value": 1316,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-9", "value": 3151,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-10", "value": 3770,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-11", "value": 2105,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-12", "value": 1316,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-13", "value": 3151,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-14", "value": 3770,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-15", "value": 2435,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}},
                {"name": "三级2-16", "value": 4839,itemStyle:{ color: '#7a84f5'} ,lineStyle:{color: '#7a84f5'}}
           ]
        },
        {
            "name": "三级2-3",
             itemStyle:{ color: '#fa9d29'} ,
             lineStyle:{color: '#fa9d29'} ,
            "children": [
                {"name": "三级3-1", "value": 8833,itemStyle:{ color: '#fa9d29'} ,lineStyle:{color: '#fa9d29'}}
           ]
        }
    ]
};

将其渲染为数组模式为：

实现方式：

html:

<div id="main"></div>

js:

<script type="text/javascript">
    var leftOption="12%";
    var rightOption="12%";
    var topOption="12%";
    var bottomOption="12%";
    var dataStr=[];
    $.ajax({
        url: '*url*',
        type: "GET",
        cache: false,
        dataType: "json",
        async: false,
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if(result.code == 200){
                var aa;
                var bb;
                console.log(result.data);
                if(result.data){
                    dataStr = result.data;
                    aa = result.data.children;
                    var firstL=0;
                    var secondL=0;
                    for (var i = 0; i < aa.length; i++) {
                        if (aa[i].children == null) {
                            console.log('没有二级');
                            firstL=firstL+1;
                            console.log(firstL);
                        }else{

                             bb = aa[i].children;
                             console.log(bb.length +'bb');
                            for (var q = 0; q < bb.length; q++) {
                                if(bb[q].children == null){
                                    console.log('没有三级');
                                    console.log(firstL);
                                }else {
                                    secondL=secondL+1;
                                }
                            }
                        }
                    }
                    if(firstL==aa.length || (aa.length == bb.length && secondL==0)){
                        $('#main').addClass('fullwidth');
                    }else if(secondL==0){
                        topOption="25%";
                    }
                }else {
                    aa = 0;
                }
                console.log(aa);

                initTreeData(aa);

            }else{
                console.log('报错了');
            }
        }
    });
    function convertData(aa) {
        var v1 = {};
        var v2 = {};
        var v3 = {};
        var v4 = {};
        var v5 = {};
        var t1 = [];
        var t2 = [];
        var t3 = [];
        var t4 = [];
        var t5 = [];
        var t = [];
        for (var i = 0; i < aa.length; i++) {
            v1={};
            v1['name'] = aa[i].browserName;
            v1['value'] = aa[i].num;
            v1['expandAndCollapse']=true;
            var itemStyle ={};
            itemStyle['color']=aa[i].itemStyle;
            itemStyle['borderColor']=aa[i].itemStyle;
            v1['itemStyle'] = itemStyle;
            var lineStyle = {};
            lineStyle['color'] = aa[i].lineStyle;
            v1['lineStyle'] = lineStyle;
            if (aa[i].children != null) {
                var bb = aa[i].children;
                for (var q = 0; q < bb.length; q++) {
                    v2={};
                    v2['name'] = bb[q].browserName;
                    v2['value'] = bb[q].num;

                    v2['expandAndCollapse']=true;
                    var itemStyle ={};
                    itemStyle['color']=bb[q].itemStyle;
                    itemStyle['borderColor']=bb[q].itemStyle;
                    v2['itemStyle'] = itemStyle;
                    var lineStyle = {};
                    lineStyle['color'] = bb[q].lineStyle;
                    v2['lineStyle'] = lineStyle;
                    if(bb[q].children != null){
                        var cc = bb[q].children;
                        for (var b = 0; b < cc.length; b++) {
                            console.log();
                            v3={};
                            v3['name'] = cc[b].browserName;
                            v3['value'] = cc[b].num;

                            v3['expandAndCollapse']=true;
                            var itemStyle ={};
                            itemStyle['color']=cc[b].itemStyle;
                            itemStyle['borderColor']=cc[b].itemStyle;
                            v3['itemStyle'] = itemStyle;
                            var lineStyle = {};
                            lineStyle['color'] = cc[b].lineStyle;
                            v3['lineStyle'] = lineStyle;
                            if(cc[b].children != null){
                                var dd=cc[b].children;
                                for (var j = 0; j < dd.length; j++) {
                                    console.log();
                                    v4 = {};
                                    v4['name'] = dd[j].browserName;
                                    v4['value'] = dd[j].num;

                                    v4['expandAndCollapse'] = true;
                                    var itemStyle = {};
                                    itemStyle['color'] = dd[j].itemStyle;
                                    itemStyle['borderColor'] = dd[j].itemStyle;
                                    v4['itemStyle'] = itemStyle;
                                    var lineStyle = {};
                                    lineStyle['color'] = dd[j].lineStyle;
                                    v4['lineStyle'] = lineStyle;

                                    if(dd[j].children != null){
                                        var ee=dd[j].children;
                                        for (var r = 0; r < ee.length; r++) {
                                            console.log();
                                            v5 = {};
                                            v5['name'] = ee[r].browserName;
                                            v5['value'] = ee[r].num;

                                            v5['expandAndCollapse'] = true;
                                            var itemStyle = {};
                                            itemStyle['color'] = ee[r].itemStyle;
                                            itemStyle['borderColor'] = ee[r].itemStyle;
                                            v5['itemStyle'] = itemStyle;
                                            var lineStyle = {};
                                            lineStyle['color'] = ee[r].lineStyle;
                                            v5['lineStyle'] = lineStyle;
                                            t5.push(v5);
                                        }
                                        v4['children'] = t5;
                                        t5=[];
                                    }
                                    t4.push(v4)
                                }
                                v3['children'] = t4;
                                t4=[];
                            }
                            t3.push(v3);
                        }

                        v2['children'] = t3;
                        t3=[];
                    }

                    t2.push(v2);
                }

            };
            v1['children'] = t2;
            t2=[];
            **t.push(v1);**
            console.log(v1);
        }

        console.log(t);
        return t;
    };
    function treeData(data) {
        var res = [];
        var tree = {};
        console.log(convertData(data));
        if(data!=0){
            var item=convertData(data);
            tree["children"] = item;
        }
        tree["symbol"]= 'image://http://192.168.20.30:1852/echarttree/head-img.png';
        tree["symbolSize"]= '40';
        tree["itemStyle"]='{borderWidth:4,opacity:\'0.9\'}';
        tree["value"]= '';
        res.push(tree);
        console.log(res);
        return res;
    };
    function initTreeData(listData) {
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option = {
            series: [{
                type: 'tree',
                data: treeData(listData),
                left: leftOption,
                right: rightOption,
                top: topOption,
                bottom: bottomOption,
                layout: 'radial',
                symbol: 'emptyCircle',
                symbolSize: 12,
                initialTreeDepth: 5,
                itemStyle: {
                    borderWidth:3
                },
                lineStyle:{
                    width:0.8
                },
                label:{
                    position:'inside',
                    distance:4,
                    offset:[5,0],
                    formatter: ['{value|{c}}','{name|{b}}'].join('\t'),
                    rich: {
                        value: {
                            fontWeight:'bold',
                            fontSize:'14'
                        },
                        name: {
                            color: '#999',
                            fontSize:'10'
                        }
                    }
                },
                leaves:{
                    label:{
                        offset:[-2,0]
                    }
                }

            }]
        });
    }
</script> 

效果图：