Chinaunix首页 | 论坛 | 博客
  • 博客访问: 952033
  • 博文数量: 110
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1997
  • 用 户 组: 普通用户
  • 注册时间: 2013-12-15 22:39
个人简介

HT for Web 3D. HT for modern web and mobile app development. www.hightopo.com

文章分类

全部博文(110)

文章存档

2020年(1)

2018年(28)

2017年(21)

2016年(10)

2015年(28)

2014年(19)

2013年(3)

我的朋友

分类: HTML5

2015-03-16 01:21:08

图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是以矢量的格式来呈现的,在展现上可以有很多的自定义和数据绑定等特性,但是其在交互的设计上就显得比较弱势。

因此我就在想,是否可在项目中将图形组件代替的图形组件呢,在对ECharts做了初步的了解后,发现两者都是基于Div和canvas的应用,于是我开始做大胆的尝试,终于,功夫不负苦心人,下面就来看下Demo的具体展现效果吧:


这是从官方Demo中拷贝下来的两个例子,其中在布局上用到了的SplitView组件将两个chart以上下比例3:2分割。

光看这个例子并无法很直观的看出和HT for Web应用的结合,接下来我们来看下HT for Web拓扑图组件与ECharts图形组件的整合效果:


在这个Demo中就整合了的Tree组件,拓扑图组件和图形组件,并采用HT for Web的SplitView组件做布局。

说了这么多,现在我们来看下具体代码的实现吧:

点击(此处)折叠或打开

  1. ht.Chart = function(option){
  2.     var self = this,
  3.             view = self._view = document.createElement('div');
  4.     view.style.position = 'absolute';
  5.     view.style.setProperty('box-sizing', 'border-box', null);
  6.     self._option = option;
  7. };
  8. ht.Default.def('ht.Chart', Object, {
  9.     ms_v: 1,
  10.     ms_fire: 1,
  11.     ms_ac: ['chart', 'option', 'isFirst'],
  12.     validateImpl: function(){
  13.         var self = this,
  14.                 chart = self._chart;
  15.         if(!chart){
  16.             chart = self._chart = echarts.init(self.getView());
  17.             chart.setOption(self._option);
  18.         }
  19.         chart.resize();
  20.     }
  21. });

你没有看错,最核心的代码就这些,下面就来介绍下代码设计的具体逻辑:

这串代码其实很好理解,就是在系统中定义ht.Chart这个类,然后让类具有view和fire的特性,最后在validateImpl方法中具体实现chart的初始化和渲染。具体的使用就是通过new关键字来创建ht.Chart的实例,并传入标准的配置参数,或在new的时候不传参,在创建对象后,通过setOption(option)方法来设置。

最后我为大家录制了具体页面的操作效果视频,欢迎大家欣赏。


阅读(2912) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~