通过ajax动态加载echarts——简单关系网络实例

因为最近的比赛需要，用到了简单关系网络这个东西。在网上查查找找也是写了有一阵子，今天算是打完收功了。决定写一份笔记来造(huo)福(hai)后人。
echarts给的实例：http://echarts.baidu.com/doc/example/force1.html
 
  
 
  
 具体如何在本地配置echarts我就不细说了，网上能查到好多的教程。最主要其实我自己配的也乱七八糟的。 
  
 
  
 
  
接下来进入正题。
 
  
在这里我们大概需要修改的主要是两部分。其余部分我就不做赘述了。
 
  
 
  
 nodes:[
                {category:0, name: '乔布斯', value : 10, label: '乔布斯\n（主要）'},
                {category:1, name: '丽萨-乔布斯',value : 2},
                {category:1, name: '保罗-乔布斯',value : 3},
                {category:1, name: '克拉拉-乔布斯',value : 3},
                {category:1, name: '劳伦-鲍威尔',value : 7},
                {category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
                {category:2, name: '奥巴马',value : 8},
                {category:2, name: '比尔-盖茨',value : 9},
                {category:2, name: '乔纳森-艾夫',value : 4},
                {category:2, name: '蒂姆-库克',value : 4},
                {category:2, name: '龙-韦恩',value : 1},
            ],
            links : [
                {source : '丽萨-乔布斯', target : '乔布斯', weight : 1, name: '女儿'},
                {source : '保罗-乔布斯', target : '乔布斯', weight : 2, name: '父亲'},
                {source : '克拉拉-乔布斯', target : '乔布斯', weight : 1, name: '母亲'},
                {source : '劳伦-鲍威尔', target : '乔布斯', weight : 2},
                {source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3, name: '合伙人'},
                {source : '奥巴马', target : '乔布斯', weight : 1},
                {source : '比尔-盖茨', target : '乔布斯', weight : 6, name: '竞争对手'},
                {source : '乔纳森-艾夫', target : '乔布斯', weight : 1, name: '爱将'},
                {source : '蒂姆-库克', target : '乔布斯', weight : 1},
                {source : '龙-韦恩', target : '乔布斯', weight : 1},
                {source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 1},
                {source : '奥巴马', target : '保罗-乔布斯', weight : 1},
                {source : '奥巴马', target : '克拉拉-乔布斯', weight : 1},
                {source : '奥巴马', target : '劳伦-鲍威尔', weight : 1},
                {source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 1},
                {source : '比尔-盖茨', target : '奥巴马', weight : 6},
                {source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 1},
                {source : '蒂姆-库克', target : '奥巴马', weight : 1}
            ]
 
  
 最开始我看了好多，起初的时候试了一个通过option.nodes什么的设置然后echarts.setOption(option)这样的。看起来很靠谱的样子啊！然后，经过了无数次的失败，我决定还是放弃了这种方法。之后就在我对着屏幕发呆的时候，我越看这东西越眼熟。这不就是json格式么。然后机智如我就换了个路子。 
  
 
  
 
  
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>














    

 
  
 
  
主要是这个部分
 
  

 
  
 
  
 var getNodes = function(){
            var result = [];
            var temp = {};
            $.ajax({
                url: basePath + "expertWeb/getPeopleRank",
                dataType: "json",
                type: "post",
                contentType: "json",
                async: false,
                success : function(data){
                    $.each(data, function(i, item){
                        temp = {category:1, name:item.rankId.toString(), value:item.rank, label:item.peopleName};
                        result.push(temp);
                    })
                },
                error : doError
            });
            return result;
        };
 
  
 
  
这部分才是本体啊，通过ajax获取数据。因为我获取的是一个list的对象链表，然后我们遍历这个链表。并且返回一个json对象，因为我的rankId是int型，而echarts中需要的是一个string所以在这里我toString一下。
 
  
而后我们把这个json对象放到该放的地方就完事啦··~
 
  
嗯，如果你已经看完了。那么，在此十分感谢！！这么粗鄙的文章您都耐心的看完了。
 
  
临表涕零，不知所言。