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