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

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

ECharts整合HT#160;for#160;Web的网络拓扑图应用相关推荐

基于Web实现网络拓扑图
想想好像好久没用写博客了! 由于最近想跳槽了(ps:尽管公司挽留,提出一些异与往常的挽留"制度",But确实已经死心了) ,发现前一段时间一些做Hadoop,和Spark同事时常来 ...
ECharts+BaiduMap+HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web ...
如何在 IntelliJ IDEA 中整合 Maven、Tomcat 部署 Web 应用
如何在 IntelliJ IDEA 中整合 Maven.Tomcat 部署 Web 应用笔者的环境: JDK 11.0.12 Maven 3.6.3 Tomcat 9.0.41(Servlet 4. ...
Spring和WebSocket整合并建立简单的Web聊天室
Spring和WebSocket整合并建立简单的Web聊天室官方主页 Spring WebSocket 一.概述 WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. Web ...
echarts力导向图节点连线动画_基于 HTML5 网络拓扑图的快速开发之入门篇（一）...
前言计算机网络的拓扑结构是引用拓扑学中研究与大小,形状无关的点.线关系的方法.把网络中的计算机和通信设备抽象为一个点,把传输介质抽象为一条线,由点和线组成的几何图形就是计算机网络的拓扑结构.网络的拓 ...
《图解HTTP》读书笔记--第1章了解Web及网络基础
写在前面:本文仅供个人学习使用,如有侵权,请联系删除.文章中所用图片绝大多数来源于<图解HTTP>,请读者支持原版. 文章目录第1章了解Web及网络基础 1.1 使用HTTP协议访问W ...
太恐怖了两天搞定一个项目 Java Web MVC 网络商城教程+源代码
两天搞定一个项目 Java Web MVC 网络商城教程+源代码最近自学做了一个网络商城将以下是代码和教程环境搭建–数据库设计–页面设计-后台设计本项目使用的jdk版本是运行项目前需要先配置好 ...
基于Web的网络在线考试系统
基于Web的网络在线考试系统一.系统简介本系统是一种基于Web的网络在线考试系统,各个模块主要从JSP.Servlet.JDBC.JavaBean四部分技术角度出发搭建框架,其中Servlet是运 ...

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

ECharts整合HT#160;for#160;Web的网络拓扑图应用相关推荐

最新文章

热门文章