ECharts图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在HT for Web上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是以矢量的格式来呈现的,在展现上可以有很多的自定义和数据绑定等特性,但是其在交互的设计上就显得比较弱势。
因此我就在想,是否可在项目中将ECharts图形组件代替HT for Web的图形组件呢,在对ECharts做了初步的了解后,发现两者都是基于Div和canvas的应用,于是我开始做大胆的尝试,终于,功夫不负苦心人,下面就来看下Demo的具体展现效果吧:
这是从ECharts官方Demo中拷贝下来的两个例子,其中在布局上用到了HT for Web的SplitView组件将两个chart以上下比例3:2分割。
光看这个例子并无法很直观的看出ECharts和HT for Web应用的结合,接下来我们来看下HT for Web拓扑图组件与ECharts图形组件的整合效果:
在这个Demo中就整合了HT for Web的Tree组件,GraphView拓扑图组件和ECharts图形组件,并采用HT for 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的初始化和渲染。具体的使用就是通过new关键字来创建ht.Chart的实例,并传入标准的ECharts配置参数,或在new的时候不传参,在创建对象后,通过setOption(option)方法来设置。
最后我为大家录制了具体页面的操作效果视频,欢迎大家欣赏。
http://v.youku.com/v_show/id_XOTEyNzUyNDIw.html
相关推荐
NULL 博文链接:https://xhload3d.iteye.com/blog/2226706
HT for Web是基于HTML5标准的企业应用图形界面一站式解决方案, 其包含通用组件、拓扑组件和3D渲染引擎等丰富的图形界面开发类库,提供了完全基于HTML5的矢量编辑器、拓扑编辑器及 3D场景编辑器等多套可视化设计工具...
https://blog.csdn.net/shenjuntao520/article/details/100155817#comments_15044861 文章相关素材
前端框架:ht-for-web,专用于拓扑图制作和页面布局。
HT FOR WEB 一套强大的基于 WebGL 技术的 3D 图形引擎,编辑器下,左边菜单可自定义控制多个不同的菜单操作。
上回我们用 ht.widget....HT for Web 提供了工具条组件类 ht.widget.Toolbar,工具条上的元素可为原生的 html 元素, 也支持 ht 提供的如 ht-form.js 的表单插件中的组件,并内置提供了按钮、单选按钮、复选框等组件。
一直在找苦苦寻找一个Box2D的物理引擎javascript整合例子,发现 http://www.hightopo.com/blog/275.html 这篇文章的例子效果非常棒,通过HT for Web的3D引擎直观的呈现Box2D物理碰撞的实时运行效果,这么强大的3D...
NULL 博文链接:https://xhload3d.iteye.com/blog/2232348
电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等都可以用 HTML5 的图形化界面来完成,所有这些简称为拓扑图。使用 HT 会让你的开发变得更加快速,快来玩玩吧!
HT7038原理图
NULL 博文链接:https://xhload3d.iteye.com/blog/2217955
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D 功能最丰富的组件,其相关类库都在 ht.graph 包下。...
数据绑定有时候真的很让人头疼,我想要的只是能快速开发,快速绑定!最好能随时随地动态变化数据,并且能够通过 json 来操作,那就更好了
NULL 博文链接:https://xhload3d.iteye.com/blog/2217934
前言 ...我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框,对传入的数据进行选择的功能,感觉整体实践起来还是比较简单方便的,所以在这边跟大家分享一下。 效果图 ...代码实现 拓扑图 从上面的效果图中我们可以...
HT1622 LCD驱动芯片2个实例程序附加一个通用程序,基于NXP芯片MC9S08DZ60配置,其他MCU做必要基础配置即可,相信对初次使用者定有很大帮助!
HT for Web 您可以轻松构建现代化的,跨桌面和移动终端的企业应用,无需担忧跨平台兼容性,及触屏手势交互等棘手问题
att7022 pdf schematic
基于HT T P 传输协议, 采用Struts2 框架整合Spring 框架技术对Web 中文件的上传下载进 行应用研究. 提出的技术整合方案结合了Struts2 的自身特点, 通过与Str ut1 框架实现模型的分析 比较, 展示了Struts2 在文件上传...
HT630 USB转串口驱动RS232 to USB driver,互通互通互通互通,仅仅适合它