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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/400728.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一个月后,我们又从 MySQL 双主切换成了主 - 从!

🚀 优质资源分享 🚀 学习路线指引(点击解锁)知识定位人群定位🧡 Python实战微信订餐小程序 🧡进阶级本课程是python flask微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一…

如何进行有效的沟通----日常沟通及会议

日常开发和工作中会经常遇到沟通不畅的问题,"communication" 不论是在学术还是实践中都是一个很重要的议题。因为低效的沟通造成的开发事故有时候是灾难性的。 沟通的问题为认为本质上就是信息不对称。下面以日常沟通及会议沟通做一些浅显的讨论&#xff…

【 Grey Hack 】万金油脚本:常见端口获取Password

目录脚本源码用法效果及示例SSH (80)端口FTP (21)端口HTTP (80)端口失败示例SMTP (25)端口版本:Grey Hack v0.7.3618 - Alpha 适用于SSH (22) 端口、FTP (21) 端口、HTTP…

什么时候用synchronized

解决安全问题的方式: java中提供了一个同步机制: 解决原理:让多条操作共享数据的代码在某一个时间段,被一个线程执行完,在执行过程中,其它线程不可以参与执行 同步格式: 同步代码块:…

pygame写游戏,常用代码记录

2019独角兽企业重金招聘Python工程师标准>>> pygame 写起游戏来还是挺不错的,不过我也没用过别的什么东西写,所以也没什么发言权。 些游戏我是从这篇文章开始入门的13岁天才儿童教你写游戏 下面是一些常用的代码片段,记录下来&…

每天一个linxu命令6之jps  查看java进程的端口

jps -- Java Virtual Machine Process Status Tool 可以列出本机所有Java进程的pid jps [ options ] [ hostid ] 选项 -q 仅输出VM标识符,不包括class name,jar name,arguments in main method -m 输出main method的参数 -l 输出完全的包名,应用主类名&…

聊聊 C++ 中几类特殊成员函数

🚀 优质资源分享 🚀 学习路线指引(点击解锁)知识定位人群定位🧡 Python实战微信订餐小程序 🧡进阶级本课程是python flask微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一…

poj2975——Caesar密码

原题: Description 据说最早的 密码来自于罗马的凯撒大帝。消息加密的办法是:对消息原文中的每个字母,分别用该字母之后的第5个字母替换(例如:消息原文中的每个字母A都分别替换成字母F)。而你要获得消息原文…

有趣的面试题

MR找共同朋友,数据格式如下: A B C D E F B A C D E C A B E D A B E E A B C D F A 第一字母表示本人,其他是他的朋友,找出有共同朋友的人,和共同朋友是谁 1 import java.io.IOException;2 import java.util.Set;3 im…

mysql 数据库定时备份 增量/全备份

echo 开始:$Begin 结束:$Last $GZDumpFile succ >> $LogFilecd $BakDir/daily/bin/rm -f * 2)增量备份脚本(脚本中mysql的数据存放路径是/home/mysql/data,具体根据自己的实际情况进行调整)[roottest-huanqiu ~]# vim /root…

【 Grey Hack 】万金油脚本:路由器漏洞检测

目录脚本源码用法效果及示例版本&#xff1a;Grey Hack v0.7.3618 - Alpha 脚本源码 if params.len ! 2 or params[0] "-h" or params[0] "--help" then exit("<b>Usage: "program_path.split("/")[-1]" [ip_address] […

中小企业ERP实施的项目管理

目前&#xff0c;我国正在大力推行企业信息化建设&#xff0c;作为一种包含了现代管理思想的ERP(Enterprise Resource Planning)系统日益成为现代企业业务运作的主要工具&#xff0c;为了提升管理水平&#xff0c;提升企业竞争力&#xff0c;在一些实力较强的企业纷纷导入ERP之…

Java开发学习(十一)----基于注解开发bean作用范围与生命周期管理

&#x1f680; 优质资源分享 &#x1f680; 学习路线指引&#xff08;点击解锁&#xff09;知识定位人群定位&#x1f9e1; Python实战微信订餐小程序 &#x1f9e1;进阶级本课程是python flask微信小程序的完美结合&#xff0c;从项目搭建到腾讯云部署上线&#xff0c;打造一…

leetcode------Subsets

标题&#xff1a;Subsets通过率&#xff1a;28.2%难度&#xff1a;中等Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be in non-descending order.The solution set must not contain duplicate subsets.For example,I…

动规(LIS)-POJ-2533

http://poj.org/problem?id2533 Longest Ordered Subsequence 给定&#xff4e;个正整数&#xff0c;求最长上升子序列&#xff08;LIS&#xff09;长度&#xff08;子序列中的元素不要求连续&#xff09;. 解题报告 思路 经典的LIS问题&#xff0c;O(n^2)的朴素做法不多作介绍…

【 Grey Hack 】万金油脚本:从路由器获取Password

目录脚本源码用法效果及示例版本&#xff1a;Grey Hack v0.7.3618 - Alpha 脚本源码 if params.len ! 2 or params[0] "-h" or params[0] "--help" then exit("<b>Usage: "program_path.split("/")[-1]" [ip_address] […

Java的注解机制——Spring自动装配的实现原理

JDK1.5加入了对注解机制的支持&#xff0c;实际上我学习Java的时候就已经使用JDK1.6了&#xff0c;而且除了Override和SuppressWarnings(后者还是IDE给生成的……)之外没接触过其他的。 进入公司前的面试&#xff0c;技术人员就问了我关于注解的问题&#xff0c;我就说可以生成…

【一知半解】AQS

&#x1f680; 优质资源分享 &#x1f680; 学习路线指引&#xff08;点击解锁&#xff09;知识定位人群定位&#x1f9e1; Python实战微信订餐小程序 &#x1f9e1;进阶级本课程是python flask微信小程序的完美结合&#xff0c;从项目搭建到腾讯云部署上线&#xff0c;打造一…

CentOS下Samba文件服务器的安装与配置

前言&#xff1a;文件服务器提供的服务在大多数公司或企业都会被用到&#xff0c;因为在任何的公司或企业都涉及不同职位获取不同资源文件的情况&#xff0c;这就需要根据不同职位配置相关的不同权限&#xff0c;以保证相关资源文件的安全性和保密性。一、Samba介绍&#xff1a…

Java基础软件的安装及配置及Javascript的运行

1.Jdk的安装及环境变量配置&#xff1a; &#xff08;1&#xff09;计算机-属性-高级系统设置。 &#xff08;2&#xff09;环境变量-系统变量-输入变量名JAVA_HOME-输入变量值C:\Program Files (x86)\Java\jdk1.7.0_79&#xff08;jdk安装路径&#xff09; &#xff08;3&…