ECharts整合HT for Web的网络拓扑图应用
ECharts图形组件在1.0公布的时候我就已经有所关注。今天在做项目的时候遇到了图标的需求,在HTfor
Web上也有图形组件的功能。可是在尝试了下详细实现后,发现HT for Web的图形组件是以矢量的格式来呈现的,在展现上能够有非常多的自己定义和数据绑定等特性,可是其在交互的设计上就显得比較弱势。
因此我就在想。是否可在项目中将ECharts图形组件取代HTfor
Web的图形组件呢,在对ECharts做了初步的了解后。发现两者都是基于Div和canvas的应用。于是我開始做大胆的尝试,最终,功夫不负苦心人,以下就来看下Demo的详细展现效果吧:
这是从ECharts官方Demo中拷贝下来的两个样例。当中在布局上用到了HTfor
Web的SplitView组件将两个chart以上下比例3:2切割。
光看这个样例并无法非常直观的看出ECharts和HT
for Web应用的结合,接下来我们来看下HT for Web拓扑图组件与ECharts图形组件的整合效果:
在这个Demo中就整合了HTfor
Web的Tree组件,GraphView拓扑图组件和ECharts图形组件。并採用HTfor
Web的SplitView组件做布局。
说了这么多。如今我们来看下详细代码的实现吧:
ht.Chart = function(option){
var self = this,
view = self._view = document.createElement('div');
view.style.position = 'absolute';
view.style.setProperty('box-sizing', 'border-box', null);
self._option = option;
};
ht.Default.def('ht.Chart', Object, {
ms_v: 1,
ms_fire: 1,
ms_ac: ['chart', 'option', 'isFirst'],
validateImpl: function(){
var self = this,
chart = self._chart;
if(!chart){
chart = self._chart = echarts.init(self.getView());
chart.setOption(self._option);
}
chart.resize();
}
});
你没有看错,最核心的代码就这些,以下就来介绍下代码设计的详细逻辑:
这串代码事实上非常好理解,就是在系统中定义ht.Chart这个类,然后让类具有view和fire的特性。最后在validateImpl方法中详细实现chart的初始化和渲染。
详细的使用就是通过newkeyword来创建ht.Chart的实例。并传入标准的ECharts配置參数,或在new的时候不传參。在创建对象后,通过setOption(option)方法来设置。
最后我为大家录制了详细页面的操作效果视频,欢迎大家赞赏。
最新文章
- iOS阶段学习第16天笔记(Category-NSSet-SEL-NSIndexSet 操作)
- Linux 下找出超過某些容量的檔案
- 生日蛋糕—dfs
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.2.更换主题
- HDOJ ----Phone List
- Java并发编程-synchronized
- ANDROID_MARS学习笔记_S01原始版_011_XML
- web前端面试试题总结---javascript篇
- Smarty 使用继承方式实现配置
- struts2文件上传限制大小问题
- captche验证码
- UIView 面面观
- JavaScript 轻松创建级联函数
- 【Python3之基本数据类型,基本运算】
- 201521123050 《Java程序设计》第11周学习总结
- SQL---存储过程---sp_addextendedproperty表字段加描述
- C语言实现牛顿迭代法解方程
- Collection、List、Set集合概括
- SQL使用总结
- mysql批量查询
热门文章
- 【bzoj2134】单选错位 期望
- CS231n笔记 Lecture 3 Loss Functions and Optimization
- Github管理 第二步:Eclipse+Github,管理Java Project版本(First Commit)
- hdu 5578 Friendship of Frog
- .net IntPtr ==interoperable pointer
- AC日记——[USACO11DEC]牧草种植Grass Planting 洛谷 P3038
- js-禁止微信内置浏览器调整字体大小
- 你也可以当面霸-MVC的原理及特点
- Python语言 介绍
- es6 export、import