`
xhload3d
  • 浏览: 207718 次
社区版块
存档分类
最新评论

ECharts整合HT for Web的网络拓扑图应用

阅读更多

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

 

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


 

这是从ECharts官方Demo中拷贝下来的两个例子,其中在布局上用到了HT for WebSplitView组件将两个chart以上下比例32分割。

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

 


 

在这个Demo中就整合了HT for WebTree组件,GraphView拓扑图组件和ECharts图形组件,并采用HT for WebSplitView组件做布局。

 

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

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这个类,然后让类具有viewfire的特性,最后在validateImpl方法中具体实现chart的初始化和渲染。具体的使用就是通过new关键字来创建ht.Chart的实例,并传入标准的ECharts配置参数,或在new的时候不传参,在创建对象后,通过setOption(option)方法来设置。

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

http://v.youku.com/v_show/id_XOTEyNzUyNDIw.html

 

  • 大小: 91.6 KB
  • 大小: 58.6 KB
4
2
分享到:
评论

相关推荐

    HT for Web列表和3D拓扑组件的拖拽应用

    NULL 博文链接:https://xhload3d.iteye.com/blog/2226706

    ht-for-web

    【ht-for-web】是一款专为前端开发者设计的框架,主要用于创建和管理拓扑图以及页面布局。这个框架的强大之处在于它的灵活性和可定制性,使得开发者可以轻松地构建出复杂且交互性强的可视化应用。 在拓扑图制作方面...

    HT for Web Demo

    1. **htForWeb3D.html**:这个HTML文件是整个3D可视化的入口点。它会包含必要的HTML结构,以及引入HT for Web库和其他相关JavaScript、CSS资源。HTML文件中通常会有创建图形实例、设置数据模型、定义交互行为等代码...

    HT for Web 入门手册

    HT for Web是基于HTML5标准的企业应用图形界面一站式解决方案, 其包含通用组件、拓扑组件和3D渲染引擎等丰富的图形界面开发类库,提供了完全基于HTML5的矢量编辑器、拓扑编辑器及 3D场景编辑器等多套可视化设计工具...

    hightopo HT for Web(hightopo.zip)

    3. **图形渲染**:HT for Web采用了高性能的SVG和HTML5 Canvas技术进行图形渲染,能够快速绘制复杂的图表和交互式拓扑图,适合用于数据可视化、流程图、网络拓扑等场景。 4. **数据驱动**:HT for Web基于数据驱动...

    HT for Web - Box2d

    一直在找苦苦寻找一个Box2D的物理引擎javascript整合例子,发现 http://www.hightopo.com/blog/275.html 这篇文章的例子效果非常棒,通过HT for Web的3D引擎直观的呈现Box2D物理碰撞的实时运行效果,这么强大的3D...

    HT for Web基础动画介绍

    【标题】"HT for Web基础动画介绍"涉及的是在Web开发中使用HT(Hightopo)框架进行动画制作的相关知识。HT for Web是一款基于HTML5的2D/3D图形和交互开发工具,广泛应用于数据可视化、模拟仿真、工业互联网等领域。...

    HT for Web 3d引擎示例加api说明文档

    HT for Web,通常简称为 HT,这是一个基于 JavaScript 开发的 WebGL 引擎。可用于 2D/3D 可视化开发,其核心文件只有一个,就是 ”ht.js”。在 index.html 中使用 script 标签进入后便可使用。 完全版本效果:...

    基于HT for Web矢量实现HTML5上传文件进度条

    HT for Web(Hierarchical Timeline for Web)是迪吉多科技公司(Digipede Technologies)开发的一个强大的Web可视化工具,它基于HTML5和JavaScript,提供了一种高效的方式来构建交互式和实时的Web应用。HT for Web...

    快速开发基于 HTML5 网络拓扑图应用--入门篇(四)

    上回我们用 ht.widget....HT for Web 提供了工具条组件类 ht.widget.Toolbar,工具条上的元素可为原生的 html 元素, 也支持 ht 提供的如 ht-form.js 的表单插件中的组件,并内置提供了按钮、单选按钮、复选框等组件。

    基于HT for Web矢量实现HTML5文件上传进度条

    HT for Web是一款强大的Web可视化工具,它允许开发者通过矢量图形来构建交互式的Web应用程序。在HTML5中,File API提供了处理文件和数据的能力,包括读取本地文件、监控文件上传进度等功能。 这篇博客(博文链接:...

    HT FOR WEB 自定义图标菜单

    HT FOR WEB 一套强大的基于 WebGL 技术的 3D 图形引擎,编辑器下,左边菜单可自定义控制多个不同的菜单操作。

    html5绘图工具 基于 HTML5 的 Canvas 技术,拓扑图是电力

    HTML5 是一种强大的 web 开发技术,它在网页...通过这样的方式,HTML5 和 Canvas 结合 JTopo 等绘图库,能够在网页上实现灵活且功能丰富的电力或电信行业的拓扑图应用,帮助工程师进行系统监控、故障排查和网络规划。

    基于 HTML5 快速构建拓扑图1

    HTML5 是一种强大的 web 开发标准,它在图形渲染、交互设计和数据处理等方面有着显著的优势。基于 HTML5 快速构建拓扑图是...开发者可以通过不断学习和实践,充分利用 HTML5 的各种特性,创造出更多创新的拓扑图应用。

    纯HTML5拓扑图编辑器源代码

    好强大的HTML5拓扑图编辑器,不敢私有,0资源分分享给大家,我是做电力SCADA要编辑电力配网图的,但申请看描述该图形组件也能应用到电信、工控等其他需要图形可视化的领域,以前一直用C++做客户端,今天玩了下...

    HT1622应用程序+应用笔记

    《HT1622应用程序与应用笔记详解》 在电子设计领域,LCD驱动芯片是实现图形和文本显示的关键元件。HT1622是一款高效、经济的LCD驱动器,广泛应用于各种嵌入式系统和消费电子产品中。本资料包包含了与HT1622相关的两...

    ht6023&ht7038电源板原理图,ht6872电路图,PDF

    本文将深入探讨"ht6023&ht7038电源板原理图,ht6872电路图,PDF"中涉及的关键元器件和电路设计,以及与"att7022 pdf schematic"相关的知识点。 首先,HT6023和HT7038是集成电路(IC),通常用于电源管理。HT6023是一...

    HT6015 HT7038三相方案原理图

    ### HT6015 HT7038 三相方案原理图分析 #### 概述 根据提供的信息,“HT6015 HT7038 三相方案原理图”主要涉及HT7038芯片及其相关的电路设计,用于实现某种特定的功能。HT7038是一种高性能的微控制器,广泛应用于...

    详解快速开发基于 HTML5 网络拓扑图应用

    在HT框架中,开发者不需要从零开始编写大量的模板代码,而是可以利用现成的组件和配置方法来快速搭建出功能丰富的网络拓扑图应用。 一个典型的拓扑图应用构建流程大致如下: 1. 创建数据容器(DataModel),它是...

Global site tag (gtag.js) - Google Analytics