echart 径向关系网图 多重关系图

头像
w芒果
    阅读 13 分钟

    1、需求，实现 网页链接分享 阅读浏览量关系图，不同分支不同颜色，同个分流同一个颜色。
    2、使用echart进行数据渲染，对option配置动态渲染。
    代码结构：
    html:

    <div id="outer"><div id="main"></div></div>
<div id="noneData" class="none-data"><img src="../images/videoShareHimg.png"/></div>
<p class="bottom-txt">仅显示微信分享数据</p>

    css:

    <head>
    <title>浏览量</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>
    <script th:src="@{/plugins/jquery.js}"></script>
    <script th:src="@{/plugins/echartsv4/echarts.min.js}"></script>
    <style>
        * {margin: 0; padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
        html,body{margin: 0;position: relative;}
        .none-data{width: 72px;height: 72px;position: absolute;left:50%;top:50%;margin-left: -36px;margin-top: -36px;display: none;}
        .bottom-txt{position: fixed;left: 0;bottom: 0;line-height:2.5;font-size:18px;color: #ccc;margin: 0;text-align: center;width: 100%;}
        #main{width:1000px;height:1000px;margin:0 auto;box-sizing: border-box;}
        #main.fullwidth{width:100%;height:100%;}
        canvas{-webkit-transform: translateZ(0); transform: translateZ(0);}
    </style>
</head>

    js:

    $(document).ready(function(){
    $('#outer').css({'width' : $(window).width(), 'height' :$(window).height()});
    var yy = [];
    var leftOption="12%";
    var rightOption="12%";
    var topOption="12%";
    var bottomOption="12%";
    if(dataStr){
        yy = dataStr.children;
        var rr =[];
        var firstL=0;
        var secondL=0;
        for (var i = 0; i < yy.length; i++) {
            if (yy[i].children == null) {
                firstL=firstL+1;
            }else{
                var rr = yy[i].children;
                for (var q = 0; q < rr.length; q++) {
                    if(rr[q].children != null){
                        secondL=secondL+1;
                    }
                }
            }
        }
        if(firstL==yy.length || (yy.length == rr.length && secondL==0)){
            $('#main').addClass('fullwidth');
        }else if(secondL==0){
            topOption="25%";
        }
        initTreeData(yy);
        $('#main').removeAttr('_echarts_instance_');
    }else {
        $('#main').hide();
        $('#noneData').show();
    }


    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);
        }
        return t;
    };
    function treeData(data) {
        var res = [];
        var tree = {};
        if(data!=0){
            var item=convertData(data);
            tree["children"] = item;
        }
        tree["symbol"]= 'image://../images/videoShareHimg.png';
        tree["symbolSize"]= '40';
        tree["itemStyle"]='{borderWidth:4,opacity:\'0.9\'}';
        tree["value"]= '';
        res.push(tree);
        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,
            //    animationDurationUpdate: 750,
                itemStyle: {
                    borderWidth:3
                },
                lineStyle:{
                    width:0.8
                },
                label:{
                    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],
                    }
                }

            }]
        });
    }
});
window.onload = function(){
    setTimeout(function () {
        if(dataStr) {
            if(!($('#main').hasClass('fullwidth'))){
                $(window).scrollLeft(300);
                $(window).scrollTop(350);
            }
        }
    },200);
};

    需要data数据格式：

    {
    "data": {
        "id": null,
        "passportId": null,
        "clientType": null,
        "houseVideoId": null,
        "status": null,
        "forwarderAccountId": null,
        "browserAccountId": null,
        "firstForwardId": null,
        "createTime": null,
        "updateTime": null,
        "createUserId": null,
        "updateUserId": null,
        "browserIcon": null,
        "browserName": null,
        "num": null,
        "children": [
            {
                "id": null,
                "passportId": null,
                "clientType": null,
                "houseVideoId": null,
                "status": null,
                "forwarderAccountId": null,
                "browserAccountId": "AA",
                "firstForwardId": null,
                "createTime": null,
                "updateTime": null,
                "createUserId": null,
                "updateUserId": null,
                "browserIcon": "AA_icon",
                "browserName": "AA_name",
                "num": 48,
                "children": [
                    {
                        "id": null,
                        "passportId": null,
                        "clientType": null,
                        "houseVideoId": null,
                        "status": null,
                        "forwarderAccountId": "AA",
                        "browserAccountId": "AAA",
                        "firstForwardId": null,
                        "createTime": null,
                        "updateTime": null,
                        "createUserId": null,
                        "updateUserId": null,
                        "browserIcon": "AAA_icon",
                        "browserName": "AAA_name",
                        "num": 32,
                        "children": null,
                        "itemStyle": "#46bfd1",
                        "lineStyle": "#46bfd1"
                    },
                    {
                        "id": null,
                        "passportId": null,
                        "clientType": null,
                        "houseVideoId": null,
                        "status": null,
                        "forwarderAccountId": "AA",
                        "browserAccountId": "AAB",
                        "firstForwardId": null,
                        "createTime": null,
                        "updateTime": null,
                        "createUserId": null,
                        "updateUserId": null,
                        "browserIcon": "AAB_icon",
                        "browserName": "AAB_name",
                        "num": 12,
                        "children": null,
                        "itemStyle": "#46bfd1",
                        "lineStyle": "#46bfd1"
                    }
                ],
                "itemStyle": "#46bfd1",
                "lineStyle": "#46bfd1"
            },
            {
                "id": null,
                "passportId": null,
                "clientType": null,
                "houseVideoId": null,
                "status": null,
                "forwarderAccountId": null,
                "browserAccountId": "AE",
                "firstForwardId": null,
                "createTime": null,
                "updateTime": null,
                "createUserId": null,
                "updateUserId": null,
                "browserIcon": "AE_icon",
                "browserName": "AE_name",
                "num": 5,
                "children": null,
                "itemStyle": "#46bfd1",
                "lineStyle": "#46bfd1"
            }
        ],
        "itemStyle": null,
        "lineStyle": null
    },
    "code": 200,
    "message": "success"
}

    本例子后台提供数据格式：

    {
    "data":
    {
        "id": null,
        "passportId": null,
        "clientType":  null,
        "houseVideoId":null,
        "status":null,
        "forwarderAccountId": null,
        "browserAccountId": null,
        "firstForwardId": null,
        "createTime": null,
        "updateTime": null,
        "createUserId": null,
        "updateUserId": null,
        "browserIcon": null,
        "browserName": null,
        "num": null,
        "children":[{
            "id": null,
            "passportId": null,
            "clientType": null,
            "houseVideoId": null,
            "status": null,
            "forwarderAccountId": null,
            "browserAccountId": "ozkr5v_vVBvwDtzUEg0zi7itZHPc",
            "firstForwardId": null,
            "createTime": null,
            "updateTime": null,
            "createUserId": null,
            "updateUserId": null,
            "browserIcon": "http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83erFBhKwBzHYyN6PwKb71GuGD9z6r3hVAxnD2nZ66zUS2vghR8cbxIldL42610kB7gEGC1eEhQdCsw/132",
            "browserName": "DerMing_You",
            "num": 4,
            "children": null,
            "itemStyle": "#46bfd1",
            "lineStyle": "#46bfd1"
        }, {
            "id": null,
            "passportId": null,
            "clientType": null,
            "houseVideoId": null,
            "status": null,
            "forwarderAccountId": null,
            "browserAccountId": "ozkr5vzzFtimKuCZA0Igwn18Wgek",
            "firstForwardId": null,
            "createTime": null,
            "updateTime": null,
            "createUserId": null,
            "updateUserId": null,
            "browserIcon": "",
            "browserName": "Cubi烨",
            "num": 2,
            "children": null,
            "itemStyle": "#7a84f5",
            "lineStyle": "#7a84f5"
        }],
    "itemStyle":null,
    "lineStyle":null
    },
    "code": 200,
    "message": "success"
}

    3、结果预览

    图片描述

    主要要点在于将后台给的数据 重新组合为所需要的data数据格式。
    本案例后台给到数据返回的dataStr.children数据格式为：
    图片描述

    echartsecharts3echarts3echart4
    w芒果
    305 声望7 粉丝
    « 上一篇
    移动端cropper.js 裁剪图片并上传
    下一篇 »
    简单ajax 分页

    引用和评论

    推荐阅读
    头像
    $router和$route的区别，路由跳转方式name 、 path 和传参方式params 、query的区别

    w芒果阅读 2.5k

    头像
    全面解析ECharts、Luckysheet、DataX、Doris如何构建高效能数仓式中台

    软件部长阅读 209

    头像
    echarts map 黑龙江补全大兴安岭地图地理测绘数据type为MultiPolygon

    火阳阅读 125

    0 条评论
    得票最新