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两个文件
1.
<script src="/js/esl.js" type"text/javascript" charset"utf-8"></script>
2.
"/js/echarts.js" "utf-8" "text/javascript">
2、页面内放置一个装载图表的容器
div id"main" style"height: 600px; width: 900px; border: 1px solid #ccc; padding: 10px;"div>
这个容器的height和width是必须要指定的，不指定会出不来图表的。
3、通过esl.js内的require()方法创建关系图
01.
02.
var myChart;
03.
04.
require(
05.
[
06.
'echarts',
07.
'echarts/chart/bar'
08.
],92)">09.
DrawEChart
10.
);
4、编写创建图表的核心代码DrawEChart
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.
'STEP DAY：网站地图'013.
subtext: 'From:www.stepday.com'
014.
x: 'right'015.
y: 'bottom'
016.
},92)">017.
tooltip: {
018.
trigger: 'item'019.
formatter: '{a} : {b}'
020.
021.
legend: {
022.
'left'023.
data: []
024.
025.
series: [
026.
{
027.
type: 'force'028.
name: "点击访问"029.
categories: [
030.
031.
'点击访问'032.
itemStyle: {
033.
normal: {
034.
color: '#ff7f50'
035.
}
036.
}
037.
038.
039.
itemStyle: {
040.
normal: {
041.
label: {
042.
show: true043.
textStyle: {
044.
'#800080'
045.
046.
047.
nodeStyle: {
048.
brushType: 'both'049.
strokeColor: 'rgba(255,215,0.4)'050.
lineWidth: 8
051.
052.
053.
054.
minRadius: 15,92)">055.
maxRadius: 200,92)">056.
density: 0.05,92)">057.
attractiveness: 1.2,92)">058.
nodes: [
090.
{ source: 0,target: 28,weight: 4 },92)">091.
{ source: 1,92)">092.
{ source: 26,92)">093.
{ source: 27,92)">094.
{ source: 2,target: 0,weight: 2 },92)">095.
096.
{ source: 5,92)">097.
098.
{ source: 9,92)">099.
100.
{ source: 13,92)">101.
102.
{ source: 15,92)">103.
104.
{ source: 22,92)">105.
106.
{ source: 3,target: 2,weight: 1 },92)">107.
{ source: 4,92)">108.
{ source: 6,target: 5,92)">109.
{ source: 7,92)">110.
{ source: 8,92)">111.
{ source: 10,target: 9,92)">112.
{ source: 11,92)">113.
{ source: 12,92)">114.
{ source: 14,target: 13,92)">115.
{ source: 16,target: 15,92)">116.
{ source: 17,92)">117.
{ source: 18,92)">118.
{ source: 19,92)">119.
{ source: 20,92)">120.
{ source: 21,92)">121.
{ source: 23,target: 22,92)">122.
{ source: 24,92)">123.
{ source: 25,weight: 1 }
124.
]
125.
126.
127.
});
128.
129.
ecConfig = require('echarts/config');
130.
//实现节点点击事件
131.
focus(param) {
132.
option = myChart.getOption();
133.
data = param.data;
134.
135.
if (data != null && data != undefined) {
136.
(data.url != && data.url != undefined) {
137.
138.
window.open(data.url);
139.
140.
141.
142.
//绑定图表节点的点击事件
143.
myChart.on(ecConfig.EVENT.CLICK,focus)
144.
}
