转: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"></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} : {b}'
},
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:
}
}
},
minRadius: ,
maxRadius: ,
density: 0.05,
attractiveness: 1.2,
nodes: [
{ category: , name: '博客', value: , url: "http://www.stepday.com/blog/" },
{ category: , name: '论坛', value: , url: "http://www.stepday.com/post/" },
{ category: , name: '管理', value: , url: "http://www.stepday.com/list/?1" },
{ category: , name: "管理经验谈", value: , url: "http://www.stepday.com/list/?2" },
{ category: , name: '管理课堂', value: , url: "http://www.stepday.com/list/?3" },
{ category: , name: "技术", value: , url: "http://www.stepday.com/list/?6" },
{ category: , name: "技术积累", value: , url: "http://www.stepday.com/list/?7" },
{ category: , name: "技术讲座", value: , url: "http://www.stepday.com/list/?8" },
{ category: , name: "技术探讨", value: , url: "http://www.stepday.com/list/?9" },
{ category: , name: "创业", value: , url: "http://www.stepday.com/list/?10" },
{ category: , name: "思考的准备", value: , url: "http://www.stepday.com/list/?11" },
{ category: , name: "奋斗在路上", value: , url: "http://www.stepday.com/list/?12" },
{ category: , name: "经营的思考", value: , url: "http://www.stepday.com/list/?13" },
{ category: , name: "屌丝经济", value: , url: "http://www.stepday.com/list/?14" },
{ category: , name: "投资理财", value: , url: "http://www.stepday.com/list/?15" },
{ category: , name: "屌丝形象", value: , url: "http://www.stepday.com/list/?22" },
{ category: , name: "健康指数", value: , url: "http://www.stepday.com/list/?23" },
{ category: , name: "爱情季节", value: , url: "http://www.stepday.com/list/?24" },
{ category: , name: "感悟生活", value: , url: "http://www.stepday.com/list/?30" },
{ category: , name: "烦恼回收站", value: , url: "http://www.stepday.com/list/?32" },
{ category: , name: "工作浅谈", value: , url: "http://www.stepday.com/list/?34" },
{ category: , name: "神级吐槽", value: , url: "http://www.stepday.com/list/?35" },
{ category: , name: "专题", value: , url: "http://www.stepday.com/zhuanti/highcharts/" },
{ category: , name: "Highcharts API", value: , url: "http://www.stepday.com/zhuanti/highcharts/" },
{ category: , name: "博客精简模式", value: , url: "http://www.stepday.com/zhuanti/picBlog/" },
{ category: , name: "论坛精简模式", value: , url: "http://www.stepday.com/zhuanti/picPost/" },
{ category: , name: '登录', value: , url: "http://www.stepday.com/login/" },
{ category: , name: '注册', value: , url: "http://www.stepday.com/register/" },
{ category: , name: 'STEP DAY', value: , url: "http://www.stepday.com" }
],
links: [
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: },
{ source: , target: , weight: }
]
}
]
}); 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图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转的更多相关文章
- 转:ECharts图表组件入门教程之Theme:ECharts图表的皮肤是什么?如何给图表换主题(皮肤)Theme?
一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表 ...
- 与 QWidget 有关的 Qt 可视化组件的继承关系图
与 QWidget 有关的 Qt 可视化组件的继承关系图
- vue-cli ——解决多次复用含有Echarts图表组件的问题
在vue项目里,组件复用是一件很开心的事,可以节省很多时间去排版,达到事半功倍效果,但是昨晚在vue-cli项目里组件复用时发现基于Echarts图表的组件不能够复用,昨晚捯饬了很久,终于还是解决了这 ...
- JS图表组件 highcharts 简单的介绍
把highcharts拿来做个简单的介绍,希望更多的朋友可以用到这个用来做图表的js插件. preparation Highcharts Highcharts是一个制作图表的纯Javascript类库 ...
- Android-Java-对象在内存中的简单关系图
代码案例一: package android.java.oop02; class Student { public int age; public String name; public void s ...
- Solr各组件之间的关系图
原文地址:http://blog.csdn.net/clj198606061111/article/details/20854419
- 【可视化】DataV接入ECharts图表库 可视化利器强强联手
DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...
- 利用Flex组件birdeye绘制拓扑关系图
birdeye绘制拓扑关系图 1.flex简单介绍 Flex 是一个高效.免费的开源框架,可用于构建具有表现力的 Web应用程序,这些应用程序利用Adobe Flash Player和Adobe AI ...
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
随机推荐
- SQL中Union和UnionAll的使用
SQL中Union和UnionAll的使用 1.建立一个Student表 ,如下: 2.建立一个Teacher表,如下: 3.使用Union,将去重并组合表,效果: 4.使用Union All,不去重 ...
- POSTGRESQL 锁表的问题
一.找出所的语句 select wait.pid, wait.query as wait_query, wait.query_start as wait_query_start, wait.lockt ...
- 用pyenv和virtualenv搭建单机多版本python虚拟开发环境
作为主流开发语言, 用python 开发的程序越来越多. 方便的是大多linux系统里面都默认集成了python, 开发可以随时随地开始. 但有时候这也成为了一个短板, 比如说有时候我们需要开发和调试 ...
- node.js 标准/错误输出 和 process.exit
node.js中,各种模块有一种标准的写法: this._process.exec(command, options, function (err, stdout, stderr) { callbac ...
- GoldenGate 12c + Oracle 12c Multitenant Container databases
下面为GoldenGate 12c + Oracle 12c Multitenant Container databases例子 1.安装OGG 源 端OGG: C:\Oracle\product\1 ...
- 【DB2】数据库的事务日志已满。SQLSTATE=57011
问题描述 在使用数据库的时候报错如上图,我们先使用db2 get db cfg for sample查看相关配置参数,其中sample为数据库名称 C:\Users\Thinkpad>db2 g ...
- 基于git 客户端使用shell工具
1 定义全局启动 命令别名 C:\Program Files\Git\etc\profile.d\aliases.sh alias ls='ls -F --color=auto --show-cont ...
- Ubuntu18.04 运行 Gradle 4.9
简介 Gradle是一个基于Apache Ant和Apache Maven的项目自动化构建工具, 使用一种基于Groovy的特定领域语言(domain-specific language DSL)来声 ...
- KVM安装和配置
[未验证部分] kvm安装前检查 # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 ca ...
- SIGTERM等信号含义【转】
主要是做sigterm 和sigkill区别的比较,之前的好多操作,在结束正在运行的一个程序的时候,常用kill,这个以后的注意,在sigterm不起作用的时候,再使用kill; 原文地址:http: ...