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)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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) 本地文件加载出错
右击Chrome浏览器快捷方式,选择“属性”, 在“目标”的输入框最后(我的机器上是.....\Application\Chrome.exe")添加上 --allow-file-access-from-files,注意是在双引号之后添加,并且先要添加一个空格,添加完毕,重启Chrome浏览器。
《如何在Echarts的关系图中正确的引用dataTool而不报错?》:
http://www.zhihu.com/question/41690502/answer/94006620