echarts3生成关系网络关系力向图

最新推荐文章于 2024-09-02 23:33:47 发布

续汉冕

最新推荐文章于 2024-09-02 23:33:47 发布

阅读量2.9w

点赞数 18

分类专栏：网页开发文章标签： echarts 力导向图示例网页开发

本文链接：https://blog.csdn.net/u010430471/article/details/52955131

版权

本文详细介绍了如何使用echarts3.2.3创建关系网络力向图，包括力引导布局的工作原理、数据准备、option设置中的tooltip、color、legend、series等内容，以及回调函数在配置中的应用。

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

echarts3生成关系网络关系力向图

力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。力引导布局的结果有良好的对称性和局部聚合性，也比较美观，我们也常常用来模拟人物关系等。

echarts3相比于之前的版本有着不小的变化，其生成力向图的资源在网上较少且不全，这里写一篇博客记录一下。

echarts3.2.3
示例文件下载

在引用了echarts.min.js文件后，首先在html中新建一个div作为图表的显示区域：

  <div id="chart"></div>

并定义样式：

<style media="screen">
      #chart{
        height: 500px;
        width: 100%;
      }
</style>

之后便开始进行力向图的数据准备，这一步需要对js中的数组和对象有所了解，如果数据格式不对图表是显示不出来的。echarts使用的数据是json格式，最外层用方括号[]表示，而里面的对象用大括号{}表示，对象内的映射用冒号：表示，并列数据用逗号分隔，我一般将其理解为对象数组。

这种形式的使用使得我们能够很方便的从数据库或其他地方调用到图表组件中，这里举一个例子数据如下：

[{category:0,name: 1, value :5,label: '乔布斯'},
{category:1, name: 2,value : 2,label: '丽萨-乔布斯'},
...]

在echarts3的力向图里面主要有两种数据，一种为节点（node）数据，一种为节点与节点之间的关系边（link）数据，这两种数据都是采用的json格式。

首先说明的是node数据：

{
   category:0,name: 1, value :5,label: '乔布斯'}

每一个{}里面为一个节点，category（该节点类别），name（关系连接的关键字，可以理解为键值中的键，可为string也可为数字）value(节点的值，可以设置节点半径与该值的关系)，label（该字段是我用来显示该节点标签的，可以改名），除此之外大家也可以自己设置一些其他字段。

然后是link数据：