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文件

 
将这些文件下载后，放入项目的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>
View Code

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
 
 

posted on 2016-10-11 14:00  zzlab  阅读(8409)  评论(2)    收藏  举报

导航