IFE2017,ECharts-06学习笔记

这题主要的难点是如何将原始数据跟echarts的各种option对接上。
其实只要看看graph对象长什么样，再对照一下案例，大概就可以明白怎么做了。

这里我用我选的数据来举例，由于每个数据对象的属性稍微有些差异，所以实际还需要自己确认一下。

get到数据后首先用dataTool处理一下，这个是echarts的一个扩展要单独引入
var graph = echarts.dataTool.gexf.parse(ajaxResponseData);

然后我们在console里看一下graph的结构

graph {
  links: [],  // 存储节点连接线数据
  nodes: []  // 存储节点数据
}

我们分别看links[i]和nodes[i]的结构 //值是随便挑的一个

links[i] {
  id: '7034',  // 连线ID
  lineStyle: {},  // 线条样式
  name: null,  // 连线名
  source: '104.0',  // 连线起点
  target: '103.0'  // 连线终点
 }

links的数据的处理还是比较简单的，基本上id、name、source、target原始数据都有，可以看下需不需要改样式

nodes[i] {
  id: '99.0',  //  节点ID
  name: 'Dude,Where's My Country?',  // 节点名
  attributes: {},  // 节点属性，根据这里的数据可以对数据进行分类
  category: '0',  // 节点类目，比如0对应的是第一个类目，如果没有需要自己添加
  value: '0',  // 节点值， 一般会用节点大小来表现值的大小
  itemStyle: {},  // 节点样式
  symbol: 'circle',  // 节点图标形状
  synbolStyle: {},  // 节点图标样式
  x: '23.31',  // 节点X坐标
  y: '120.84'  // 节点Y坐标
 }

而nodes的原始数据很可能只有id、name和attributes，其他就要自己根据数据特征来考虑下如何设置了。

比如我选的原始数据没有category、value和各种样式，所以我接下来需要对原始数据进行一些处理。

Nodes have been given values "l", "n", or "c" to indicate whether they are "liberal", "neutral", or "conservative".

根据数据的说明，我的原始数据分为三个类目，可以在attributes里读取到，分别是“l”、“n”、“c”，根据这些标记可以将节点分类

switch(node.attributes.value){      // 根据数据标记分类
  case 'l':
    ...
    break;
  case 'n':
    ...
    break;
  case 'c':
    ...
    break;
  default:
    ...  // 具体处理我全省略了，自行根据所选数据写吧
}

然后我们把数据放进option的series里

series: [{
  ...
  type: 'graph',
  data: graph.nodes,
  links: graph.links,
  ...  // 其他设置我省略了，具体自行查配置手册
}]  

基本过程就这样