需求

如图，生成作者合作之间的关系图，点表示作者，边表示合作次数。

echarts 本身生成的图三个顶点都在一边，很不好看，我们需要生成有加角的三个顶点。 生成这个图，需要解决三个问题：

• 各个点角度计算。
• option 数据动态生成。
• 数据后加载。

option 数据动态生成

var option = {
    color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
    title: {
      text: 'Graph 简单示例'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [{
      type: 'graph',
      layout: 'none',
      symbolSize: 50,
      roam: true,
      label: {
        normal: {
          show: true
        }
      },
      edgeSymbol: ['arrow'],
      // edgeSymbolSize: [4, 10],
      edgeLabel: {
        normal: {
          textStyle: {
            fontSize: 20
          }
        }
      },
      data: [],
      links: []
    }]
  };

这是option json 结构，其中最关键的data ,link 两个结点。

  var dataitem = {
    name: '宋三',
    x: 150,
    y: 100,
    itemStyle: {
      color: '#37A2DA'
    }
  };

这是link 结点：

var line = {
    source: 2,
    target: 0,
    label: {
      normal: {
        show: true,
        formatter: '{a|合作1}',

      rich: {
        a: {
          color: 'black',
          lineHeight: 10
        }
      }
      }
    }
  };

通过for 生成各个点，各个边.（其中nodes, tips 代表点和边的数组）

for(var i=0;i<nodes.length;i++){
    var temp = JSON.parse(JSON.stringify(dataitem));
      temp.name = nodes[i];
      temp.x = 100;
      temp.y = 100;
}
for(var i=0;i<tips.length;i++){
    var temp = JSON.parse(JSON.stringify(line));
    temp.source = i+1;
    temp.label.normal.formatter = '{a|'+tips[i]+'}';
    lines.push(temp);
  }

最后赋值：

option.series[0].data = data;
option.series[0].links = lines;

角度计算

一个知识点： 坐标系，水平右向是0度，顺时针是负方向，逆时针是正方向，4个顶点逆时针分别是0度，90度，180度，270度。

第一个点从90度开始，逆时针旋转，

90角度： var initAngle = - Math.PI / 2;
角度间隔： var gapAngle = 2 * Math.PI / (nodes.length - 1);

（图画的有点歪）

根椐公式：

x = r1+ r*cos(𝞡)
y = r2 + r*sin(𝞡)
(其中r1,r2 代表第一个点的x,y坐标)

得出后面每个点的坐标：

temp.x = r1 + parseInt(Math.cos(gapAngle) * radius);
temp.y = r2 + parseInt(Math.sin(gapAngle) * radius);

后加载：

看下官方demo, 有说明。