web应用边学边开发(3)：玩转Echarts
接下来，打算将一个GEXF文件放到网页中显示，看了一下，如下的Echarts的关系图模板比较吻合我的需求，决定采用它。
于是，开始动手:
1. 设置图容器
在页面上开辟一个div空间，用于摆放此图，代码如下：
1 <div class="content"> 2 <div class="cg-gexf"> 3 <div class="panel panel-widget"> 4 <div class="panel-title"> 5 APP CG 调用图分析结果 6 </div> 7 <div class="panel-body"> 8 ##此处待加入关系图echarts代码 9 </div> 10 </div> 11 </div> 12 </div> 13
2.添加echarts引用
接下来，由于要插入echarts代码，需要引入以下js文件
- echarts.js(or echarts.min.js)
- 下载地址：echarts官网完整包
- jquery.js
- 推荐下载地址1： http://echarts.baidu.com/vendors/jquery/jquery.js
- 推荐下载地址2：jQuery官网（目前最新版本是1.12）
- dataTool.js（or dataTool.min.js)
将这些文件下载后，放入项目的js文件夹中，在网页html的头部我添加如下引用：
1 <script type="text/javascript" src="js/echarts.min.js"></script> 2 <script type="text/javascript" src="js/jquery.js"></script> 3 <script type="text/javascript" src="js/dataTool.min.js"></script>
3.插入echarts模板
echarts的模板使用方法为：
1） 先为ECharts准备一个具备大小（宽高）的Dom，id为container-gexf
<div id="container-gexf" style="height: 900px"></div>
2） 基于准备好的dom，初始化echarts实例
1 <script type="text/javascript"> 2 var dom = document.getElementById("container-gexf"); 3 var myChart = echarts.init(dom); 4 #添加关系图js代码 5 </script>
3）填写具体的关系图js代码，先按官方示例复制，并针对自身情况做一些修改。下面的代码注释中标明了可如何进行修改：
1 <script type="text/javascript"> 2 var dom = document.getElementById("container"); 3 var myChart = echarts.init(dom); 4 var app = {}; 5 option = null; 6 myChart.showLoading(); 7 $.get('data/les_miserables.gexf', function (xml) {//此处修改要显示的gexf文件 8 myChart.hideLoading(); 9 10 var graph = echarts.dataTool.gexf.parse(xml); 11 var categories = []; 12 for (var i = 0; i < 4; i++) { 13 categories[i] = { 14 name: '系列' + i 15 }; 16 }//此处可修改系列名，原模板命名为系列1~系列9，此处我们修改为4个系列 17 graph.nodes.forEach(function (node) { 18 node.itemStyle = null; 19 node.value = node.symbolSize; 20 node.label = {normal: {show: node.symbolSize >10}};//此处修改显示lable的规则，如当节点大小大于10时，显示该节点大小 21 node.category = node.attributes.type_class;//此处修改分类依据，可改成任意integer类型的属性 22 }); 23 option = { 24 title: { 25 text: 'Math Relations', //此处修改图名称 26 subtext: 'Default layout',//此处修改布局名称 27 top: 'bottom', 28 left: 'right' 29 }, 30 tooltip: {}, 31 legend: [{ 32 // selectedMode: 'single', 33 data: categories.map(function (a) { 34 return a.name; 35 }) 36 }], 37 animationDuration: 1500, 38 animationEasingUpdate: 'quinticInOut', 39 series : [ 40 { 41 name: 'Les Miserables', 42 type: 'graph', 43 layout: 'circular',//此处修改布局方法，none为随机，circular为环形 44 data: graph.nodes, 45 links: graph.links, 46 categories: categories, 47 roam: true, 48 label: { 49 normal: { 50 position: 'right', 51 formatter: '{b}' 52 } 53 }, 54 lineStyle: { 55 normal: { 56 curveness: 0.3 57 } 58 } 59 } 60 ] 61 }; 62 63 myChart.setOption(option); 64 }, 'xml');; 65 if (option && typeof option === "object") { 66 var startTime = +new Date(); 67 myChart.setOption(option, true); 68 var endTime = +new Date(); 69 var updateTime = endTime - startTime; 70 console.log("Time used:", updateTime); 71 } 72 </script>
4 调试出现的问题
目前还只是布局前端，不涉及实际数据的操作和现实，所以暂时使用的是官方的gexf文件，并将其存储在本地测试网页，所以遇见了如下两个问题：
1） 下载官方gexf文件
要测试代码，还需要gexf数据文件，官方的les-miserables.gexf可从此地址下载 http://echarts.baidu.com/gallery/data/asset/data/les-miserables.gexf，
下载后放入项目的data文件夹。
下面我对les-miserables.gexf做一个批注，将来自己的gexf文件需要写成什么格式可参照此批注中的说明：
1 <?xml version="1.0" encoding="UTF-8"?> 2 <gexf xmlns="http://www.gexf.net/1.2draft" version="1.2" xmlns:viz="http://www.gexf.net/1.2draft/viz" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd"> 3 <meta lastmodifieddate="2014-01-30"> 4 <creator>Gephi 0.8.1</creator> 5 <description></description> 6 </meta> 7 //以上为gexf文件常规头部 8 <graph defaultedgetype="undirected" mode="static">//定义gexf图 9 //此处defaltedgetype属性定义边为无向边，如果为有向边，定义为"directed" 10 <attributes class="node" mode="static"> 11 <attribute id="modularity_class" title="Modularity Class" type="integer"></attribute> 12 </attributes> 13 //自定义的attribute，可以更换为其它id和title，如果要使用模板代码基于该attribute进行分类，type应定义为integer14 <nodes>//节点 15 <node id="0" label="Myriel">//节点0 16 <attvalues> 17 <attvalue for="modularity_class" value="0"></attvalue> 18 </attvalues> 19 <viz:size value="28.685715"></viz:size>//节点大小 20 <viz:position x="-266.82776" y="299.6904" z="0.0"></viz:position>//节点位置，可自动生成 21 <viz:color r="235" g="81" b="72"></viz:color>//节点颜色 22 </node> 23 ...... 24 </nodes> 25 <edges>//边，node--node间的连线 26 <edge id="0" source="1" target="0"> 27 <attvalues></attvalues> 28 </edge> 29 <edge id="1" source="2" target="0" weight="8.0"> 30 <attvalues></attvalues> 31 </edge> 32 ...... 33 </edges> 34 </graph> 35 </gexf>
2） 本地文件加载出错
代码编辑好，js文件引用正确，gexf文件也添加了，测试html网页时，发现gexf文件一直在loading，却加载不上。用审查元素工具查看了一下错误，发现是本地gexf文件加载不上，为了安全起见，浏览器默认将ajax加载本地文件的功能禁止了。既然调试为重，那只能暂时牺牲安全性，打开chrome浏览器的访问本地文件选项，打开方法为：
右击Chrome浏览器快捷方式，选择“属性”， 在“目标”的输入框最后（我的机器上是.....\Application\Chrome.exe")添加上 --allow-file-access-from-files，注意是在双引号之后添加，并且先要添加一个空格，添加完毕，重启Chrome浏览器。
参考文献1：
《如何在Echarts的关系图中正确的引用dataTool而不报错？》：
http://www.zhihu.com/question/41690502/answer/94006620参考文献2：《使用Echarts呈现天善用户的关系图 》:https://ask.hellobi.com/blog/seng/3645
