站點地圖不外乎就是羅列一個網站的層次結構，提煉地講就是一個關系結構圖。那么我們如何巧用ECharts圖表組件內的簡單關系結構圖來實現一個站點的地圖結構呢？另外如何點擊某個節點的時候實現頁面跳轉呢？

針對上述所提出的疑問，我琢磨了一下ECharts圖表組件。找到官方這樣的一個適合的簡單關系圖：http://echarts.baidu.com/doc/example/force1.html?通過觀察ECharts圖表組件的簡單關系圖的數據結構，得出我要實現一個站點地圖需要做哪些工作：

1、引入echarts圖表組件相關的js文件，主要用到esl.js和echarts.js兩個文件

<script src="/js/esl.js" type="text/javascript" charset="utf-8"></script> <script src="/js/echarts.js" charset="utf-8" type="text/javascript"></script>

2、頁面內放置一個裝載圖表的容器

<div id="main" style="height: 600px; width: 900px; border: 1px solid #ccc; padding: 10px;"></div>

這個容器的height和width是必須要指定的，不指定會出不來圖表的。

3、通過esl.js內的require()方法創建關系圖

//定義一個全局的圖表對象 便于后面使用 var myChart;require(['echarts','echarts/chart/bar' //按需加載圖表關于bar圖的部分 ],DrawEChart);

4、編寫創建圖表的核心代碼DrawEChart

//創建ECharts圖表 function DrawEChart(ec) {//--- 折柱 ---myChart = ec.init(document.getElementById('main'));//圖表顯示提示信息 myChart.showLoading({text: "站點關系圖正在努力加載..."});myChart.hideLoading();myChart.setOption({title: {text: 'STEP DAY：網站地圖',subtext: 'From:www.stepday.com',x: 'right',y: 'bottom'},tooltip: {trigger: 'item',formatter: '{a} : '},legend: {x: 'left',data: []},series: [{type: 'force',name: "點擊訪問",categories: [{name: '點擊訪問',itemStyle: {normal: {color: '#ff7f50'}}}],itemStyle: {normal: {label: {show: true,textStyle: {color: '#800080'}},nodeStyle: {brushType: 'both',strokeColor: 'rgba(255,215,0,0.4)',lineWidth: 8}}},minRadius: 15,maxRadius: 200,density: 0.05,attractiveness: 1.2,nodes: [{ category: 0, name: '博客', value: 10, url: "http://www.stepday.com/blog/" },{ category: 0, name: '論壇', value: 10, url: "http://www.stepday.com/post/" },{ category: 0, name: '管理', value: 10, url: "http://www.stepday.com/list/?1" },{ category: 0, name: "管理經驗談", value: 10, url: "http://www.stepday.com/list/?2" },{ category: 0, name: '管理課堂', value: 10, url: "http://www.stepday.com/list/?3" },{ category: 0, name: "技術", value: 10, url: "http://www.stepday.com/list/?6" },{ category: 0, name: "技術積累", value: 10, url: "http://www.stepday.com/list/?7" },{ category: 0, name: "技術講座", value: 10, url: "http://www.stepday.com/list/?8" },{ category: 0, name: "技術探討", value: 10, url: "http://www.stepday.com/list/?9" },{ category: 0, name: "創業", value: 10, url: "http://www.stepday.com/list/?10" },{ category: 0, name: "思考的準備", value: 10, url: "http://www.stepday.com/list/?11" },{ category: 0, name: "奮斗在路上", value: 10, url: "http://www.stepday.com/list/?12" },{ category: 0, name: "經營的思考", value: 10, url: "http://www.stepday.com/list/?13" },{ category: 0, name: "屌絲經濟", value: 10, url: "http://www.stepday.com/list/?14" },{ category: 0, name: "投資理財", value: 10, url: "http://www.stepday.com/list/?15" },{ category: 0, name: "屌絲形象", value: 10, url: "http://www.stepday.com/list/?22" },{ category: 0, name: "健康指數", value: 10, url: "http://www.stepday.com/list/?23" },{ category: 0, name: "愛情季節", value: 10, url: "http://www.stepday.com/list/?24" },{ category: 0, name: "感悟生活", value: 10, url: "http://www.stepday.com/list/?30" },{ category: 0, name: "煩惱回收站", value: 10, url: "http://www.stepday.com/list/?32" },{ category: 0, name: "工作淺談", value: 10, url: "http://www.stepday.com/list/?34" },{ category: 0, name: "神級吐槽", value: 10, url: "http://www.stepday.com/list/?35" },{ category: 0, name: "專題", value: 10, url: "http://www.stepday.com/zhuanti/highcharts/" },{ category: 0, name: "Highcharts API", value: 10, url: "http://www.stepday.com/zhuanti/highcharts/" },{ category: 0, name: "博客精簡模式", value: 10, url: "http://www.stepday.com/zhuanti/picBlog/" },{ category: 0, name: "論壇精簡模式", value: 10, url: "http://www.stepday.com/zhuanti/picPost/" },{ category: 0, name: '登錄', value: 10, url: "http://www.stepday.com/login/" },{ category: 0, name: '注冊', value: 10, url: "http://www.stepday.com/register/" },{ category: 0, name: 'STEP DAY', value: 10, url: "http://www.stepday.com" }],links: [{ source: 0, target: 28, weight: 4 },{ source: 1, target: 28, weight: 4 },{ source: 26, target: 28, weight: 4 },{ source: 27, target: 28, weight: 4 },{ source: 2, target: 0, weight: 2 },{ source: 2, target: 1, weight: 2 },{ source: 5, target: 0, weight: 2 },{ source: 5, target: 1, weight: 2 },{ source: 9, target: 0, weight: 2 },{ source: 9, target: 1, weight: 2 },{ source: 13, target: 0, weight: 2 },{ source: 13, target: 1, weight: 2 },{ source: 15, target: 0, weight: 2 },{ source: 15, target: 1, weight: 2 },{ source: 22, target: 0, weight: 2 },{ source: 22, target: 1, weight: 2 },{ source: 3, target: 2, weight: 1 },{ source: 4, target: 2, weight: 2 },{ source: 6, target: 5, weight: 1 },{ source: 7, target: 5, weight: 2 },{ source: 8, target: 5, weight: 1 },{ source: 10, target: 9, weight: 1 },{ source: 11, target: 9, weight: 2 },{ source: 12, target: 9, weight: 1 },{ source: 14, target: 13, weight: 1 },{ source: 16, target: 15, weight: 2 },{ source: 17, target: 15, weight: 1 },{ source: 18, target: 15, weight: 1 },{ source: 19, target: 15, weight: 2 },{ source: 20, target: 15, weight: 1 },{ source: 21, target: 15, weight: 1 },{ source: 23, target: 22, weight: 2 },{ source: 24, target: 22, weight: 1 },{ source: 25, target: 22, weight: 1 }]}]});var ecConfig = require('echarts/config');//實現節點點擊事件 function focus(param) {var option = myChart.getOption();var data = param.data;//判斷節點的相關數據是否正確if (data != null && data != undefined) {if (data.url != null && data.url != undefined) {//根據節點的擴展屬性url打開新頁面 window.open(data.url);}}}//綁定圖表節點的點擊事件 myChart.on(ecConfig.EVENT.CLICK, focus)}

到這里一個簡單的站點結構關系圖就完成了。從上面的代碼中不難看出來，結構關系圖的重點就是兩大塊：

1）、nodes數組

這個內主要是用于定義結構圖的所有節點，其中category是指當前節點屬于categories數組內的哪一個分類。腳標從0開始；

name表示節點的名稱，value表示大小；

url是我自己擴展的節點屬性，用于存放當前節點對應的站點url地址。

2）、links數組

這個主要是用于定義nodes內節點之間相互的關系，只要這里建立關系后，展現出來的關系圖節點相互之間會產生一條連接線進行相互之間的鏈接。在設置這個數組的時候需要注意一下幾點：

a、source：表示節點位于nodes數組內的位置，腳標從0開始。這個數字的范圍必須是[0,nodes.length]；

b、target：表示鏈接的目標節點在nodes數組內的位置，腳標從0開始。這個數字的范圍必須是[0,nodes.length]；

c、weight：表示當前節點的權重，權重越大距離目標節點的位置越近，也表示越親近。數字范圍不限制，數字越小距離目標節點越遠。

3）、為了能夠讓用戶點擊節點可以打開節點所代表的頁面，所以我么還需要實現節點的點擊事件

在Echarts圖表組件內都是通過myChart.on(event,function(){});的形式來進行事件的綁定的，這里也不例外，可以從代碼中很明了地看出在結尾的地方綁定了EVETN_CLICK事件，且在實現方法內通過param對象拿到data數據對象，從中獲得擴展屬性url，進行數據判斷通過window.open(url)的方式新開頁面。

總結

以上是生活随笔為你收集整理的转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。