web应用边学边开发(3)：玩转Echarts

时间 2019-11-26

标签 web 应用开发 echarts 栏目 HTML 繁體版

原文原文链接

接下来，打算将一个GEXF文件放到网页中显示，看了一下，以下的Echarts的关系图模板比较吻合个人需求，决定采用它。javascript

因而，开始动手:html

1. 设置图容器前端

在页面上开辟一个div空间，用于摆放此图，代码以下： java

 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引用 node

接下来，因为要插入echarts代码，须要引入如下js文件jquery

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)
- 推荐下载地址1：http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.js
- 推荐下载地址2：知乎陈坤github提供的datatool完整包和min包

将这些文件下载后，放入项目的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的模板使用方法为：git

1）先为ECharts准备一个具有大小（宽高）的Dom，id为container-gexfgithub

<div id="container-gexf" style="height: 900px"></div>

2）基于准备好的dom，初始化echarts实例ajax

1   <script type="text/javascript">
2                 var dom = document.getElementById("container-gexf");
3                 var myChart = echarts.init(dom);
4                 #添加关系图js代码
5   </script>

3）填写具体的关系图js代码，先按官方示例复制，并针对自身状况作一些修改。下面的代码注释中标明了可如何进行修改：chrome

 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