ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转

[ 摘要]： 站点地图不外乎就是罗列一个网站的层次结构，提炼地讲就是一个关系结构图。那么我们如何巧用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...

站点地图不外乎就是罗列一个网站的层次结构，提炼地讲就是一个关系结构图。那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢？另外如何点击某个节点的时候实现页面跳转呢？

针对上述所提出的疑问，我琢磨了一下ECharts图表组件。找到官方这样的一个适合的简单关系图：http://echarts.baidu.com/doc/example/force1.html 通过观察ECharts图表组件的简单关系图的数据结构，得出我要实现一个站点地图需要做哪些工作：

1、引入echarts图表组件相关的js文件，主要用到esl.js和echarts.js两个文件

view source print ?

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

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

2、页面内放置一个装载图表的容器

view source print ?

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

这个容器的height和width是必须要指定的，不指定会出不来图表的。

3、通过esl.js内的require()方法创建关系图

view source print ?

01. //定义一个全局的图表对象 便于后面使用 

02. var myChart;

03.  

04. require(

05. [

06. 'echarts',

07. 'echarts/chart/bar' //按需加载图表关于bar图的部分

08. ],

09. DrawEChart

10. );

4、编写创建图表的核心代码DrawEChart

view source print ?

001. //创建ECharts图表

002. function DrawEChart(ec) {

003. //--- 折柱 ---

004. myChart = ec.init(document.getElementById('main'));

005. //图表显示提示信息

006. myChart.showLoading({

007. text: "站点关系图正在努力加载..."

008. });

009. myChart.hideLoading();

010. myChart.setOption({

011. title: {

012. text: 'STEP DAY：网站地图',

013. subtext: 'From:www.stepday.com',

014. x: 'right',

015. y: 'bottom'

016. },

017. tooltip: {

018. trigger: 'item',

019. formatter: '{a} : {b}'

020. },

021. legend: {

022. x: 'left',

023. data: []

024. },

025. series: [

026. {

027. type: 'force',

028. name: "点击访问",

029. categories: [

030. {

031. name: '点击访问',

032. itemStyle: {

033. normal: {

034. color: '#ff7f50'

035. }

036. }

037. }

038. ],

039. itemStyle: {

040. normal: {

041. label: {

042. show: true,

043. textStyle: {

044. color: '#800080'

045. }

046. },

047. nodeStyle: {

048. brushType: 'both',

049. strokeColor: 'rgba(255,215,0,0.4)',

050. lineWidth: 8

051. }

052. }

053. },

054. minRadius: 15,

055. maxRadius: 200,

056. density: 0.05,

057. attractiveness: 1.2,

058. nodes: [

059. { category: 0, name: '博客', value: 10, url: "http://www.stepday.com/blog/" },

060. { category: 0, name: '论坛', value: 10, url: "http://www.stepday.com/post/" },

061. { category: 0, name: '管理', value: 10, url: "http://www.stepday.com/list/?1" },

062. { category: 0, name: "管理经验谈", value: 10, url: "http://www.stepday.com/list/?2" },

063. { category: 0, name: '管理课堂', value: 10, url: "http://www.stepday.com/list/?3" },

064. { category: 0, name: "技术", value: 10, url: "http://www.stepday.com/list/?6" },

065. { category: 0, name: "技术积累", value: 10, url: "http://www.stepday.com/list/?7" },

066. { category: 0, name: "技术讲座", value: 10, url: "http://www.stepday.com/list/?8" },

067. { category: 0, name: "技术探讨", value: 10, url: "http://www.stepday.com/list/?9" },

068. { category: 0, name: "创业", value: 10, url: "http://www.stepday.com/list/?10" },

069. { category: 0, name: "思考的准备", value: 10, url: "http://www.stepday.com/list/?11" },

070. { category: 0, name: "奋斗在路上", value: 10, url: "http://www.stepday.com/list/?12" },

071. { category: 0, name: "经营的思考", value: 10, url: "http://www.stepday.com/list/?13" },

072. { category: 0, name: "屌丝经济", value: 10, url: "http://www.stepday.com/list/?14" },

073. { category: 0, name: "投资理财", value: 10, url: "http://www.stepday.com/list/?15" },

074. { category: 0, name: "屌丝形象", value: 10, url: "http://www.stepday.com/list/?22" },

075. { category: 0, name: "健康指数", value: 10, url: "http://www.stepday.com/list/?23" },

076. { category: 0, name: "爱情季节", value: 10, url: "http://www.stepday.com/list/?24" },

077. { category: 0, name: "感悟生活", value: 10, url: "http://www.stepday.com/list/?30" },

078. { category: 0, name: "烦恼回收站", value: 10, url: "http://www.stepday.com/list/?32" },

079. { category: 0, name: "工作浅谈", value: 10, url: "http://www.stepday.com/list/?34" },

080. { category: 0, name: "神级吐槽", value: 10, url: "http://www.stepday.com/list/?35" },

081. { category: 0, name: "专题", value: 10, url: "http://www.stepday.com/zhuanti/highcharts/" },

082. { category: 0, name: "Highcharts API", value: 10, url: "http://www.stepday.com/zhuanti/highcharts/" },

083. { category: 0, name: "博客精简模式", value: 10, url: "http://www.stepday.com/zhuanti/picBlog/" },

084. { category: 0, name: "论坛精简模式", value: 10, url: "http://www.stepday.com/zhuanti/picPost/" },

085. { category: 0, name: '登录', value: 10, url: "http://www.stepday.com/login/" },

086. { category: 0, name: '注册', value: 10, url: "http://www.stepday.com/register/" },

087. { category: 0, name: 'STEP DAY', value: 10, url: "http://www.stepday.com" }

088. ],

089. links: [

090. { source: 0, target: 28, weight: 4 },

091. { source: 1, target: 28, weight: 4 },

092. { source: 26, target: 28, weight: 4 },

093. { source: 27, target: 28, weight: 4 },

094. { source: 2, target: 0, weight: 2 },

095. { source: 2, target: 1, weight: 2 },

096. { source: 5, target: 0, weight: 2 },

097. { source: 5, target: 1, weight: 2 },

098. { source: 9, target: 0, weight: 2 },

099. { source: 9, target: 1, weight: 2 },

100. { source: 13, target: 0, weight: 2 },

101. { source: 13, target: 1, weight: 2 },

102. { source: 15, target: 0, weight: 2 },

103. { source: 15, target: 1, weight: 2 },

104. { source: 22, target: 0, weight: 2 },

105. { source: 22, target: 1, weight: 2 },

106. { source: 3, target: 2, weight: 1 },

107. { source: 4, target: 2, weight: 2 },

108. { source: 6, target: 5, weight: 1 },

109. { source: 7, target: 5, weight: 2 },

110. { source: 8, target: 5, weight: 1 },

111. { source: 10, target: 9, weight: 1 },

112. { source: 11, target: 9, weight: 2 },

113. { source: 12, target: 9, weight: 1 },

114. { source: 14, target: 13, weight: 1 },

115. { source: 16, target: 15, weight: 2 },

116. { source: 17, target: 15, weight: 1 },

117. { source: 18, target: 15, weight: 1 },

118. { source: 19, target: 15, weight: 2 },

119. { source: 20, target: 15, weight: 1 },

120. { source: 21, target: 15, weight: 1 },

121. { source: 23, target: 22, weight: 2 },

122. { source: 24, target: 22, weight: 1 },

123. { source: 25, target: 22, weight: 1 }

124. ]

125. }

126. ]

127. });

128.  

129. var ecConfig = require('echarts/config');

130. //实现节点点击事件

131. function focus(param) {

132. var option = myChart.getOption();

133. var data = param.data;

134. //判断节点的相关数据是否正确

135. if (data != null && data != undefined) {

136. if (data.url != null && data.url != undefined) {

137. //根据节点的扩展属性url打开新页面

138. window.open(data.url);

139. }

140. }

141. }

142. //绑定图表节点的点击事件

143. myChart.on(ecConfig.EVENT.CLICK, focus)

144. }

到这里一个简单的站点结构关系图就完成了。从上面的代码中不难看出来，结构关系图的重点就是两大块：

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)的方式新开页面。

最终效果查看地址可以继续访问：http://www.stepday.com/sitemap.html

理论永远都是悬乎的，只有自己动手做过才知道其中的奥妙。