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

最新推荐文章于 2024-06-19 23:29:50 发布

Dintama

最新推荐文章于 2024-06-19 23:29:50 发布

阅读量9.9k

点赞数 2

分类专栏：杂项

本文链接：https://blog.csdn.net/dy13145687/article/details/45795359

版权

本文介绍如何通过Ajax获取数据并利用Echarts绘制简单关系网络。主要修改两个关键部分，首先处理数据，将从服务器获取的list对象链表遍历并转化为JSON对象，注意将rankId由int转为string以符合Echarts需求。然后将处理后的JSON对象应用到Echarts图表配置中。

摘要由CSDN通过智能技术生成

<pre name="code" class="java">因为最近的比赛需要，用到了简单关系网络这个东西。在网上查查找找也是写了有一阵子，今天算是打完收功了。决定写一份笔记来造(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)这样的。看起来很靠谱的样子啊！然后，经过了无数次的失败，我决定还是放弃了这种方