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

ad6623 发布于2019-08-02 18:11 / 1274人阅读

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

私有云混合云 ht-for-web web的应用 web服务器的应用 web应用网络负载均衡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55229.html

数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

摘要：拓扑图组件作为最典型的客户需求应用，自然是首篇登场。入门手册中也有个简单的编辑器例子，教用户如何自定义创建节点连线和多边形的示例教材，学习自定义拓扑图交互可从此例子入手。 HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向，接着就朝这个方向慢慢打磨，如今 HT ...

Shonim 2019-08-05 10:02 评论0 收藏0
HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

摘要：在前面百度地图整合网络拓扑图应用我们有介绍百度地图和的整合，我们今天来谈谈和的整合。在前面《百度地图、ECharts整合HT for Web网络拓扑图应用》我们有介绍百度地图和 HT for Web 的整合，我们今天来谈谈 OpenLayers 和 HT for Web 的整合。 HT for Web 作为逻辑拓扑图形组件自身没有 GIS 功能，但可以与各种 GIS 引擎即其客户端组...

Euphoria 2019-08-05 09:59 评论0 收藏0
HTML5 技术在风电、光伏等新能源领域的应用

摘要：随着新一轮工业革命兴起，应对气候变化日益成为全球共识，能源技术正在成为引领能源产业变革实现创新驱动发展的源动力。随着新一轮工业革命兴起，应对气候变化日益成为全球共识，能源技术正在成为引领能源产业变革、实现创新驱动发展的源动力。从全球到中国，以风能、光伏发电为代表的新能源产业发展迅速，可再生能源发电与现代电网的融合成为了世界能源可持续转型的核心，发电技术继续沿着大规模、高效率和低成本方...

mudiyouyou 2019-08-05 10:46 评论0 收藏0
快速开发基于 HTML5 网络拓扑图应用

摘要：采用开发网络拓扑图非常容易，例如入门手册的第一个小例子麻雀虽小五脏俱全该例子展示了如何构建两个节点一条连线以及一个的组合效果。更多拓扑图例子可参考采用 HT 开发网络拓扑图非常容易，例如《入门手册》的第一个小例子麻雀虽小五脏俱全：http://www.hightopo.com/guide... showImg(https://segmentfault.com/img/bVDCcV?w...

Nino 2019-08-05 10:12 评论0 收藏0
基于HTML5快速搭建TP-LINK电信拓扑设备面板

摘要：今天我们以真实的设备面板为模型，完成设备面板的搭建，和指示灯的闪烁和图元流动。在我们的中，两条连接服务器和的曲线，均是使用自定义的新连线类型。　　今天我们以真实的TP-LINK设备面板为模型，完成设备面板的搭建，和指示灯的闪烁和图元流动。　　先来目睹下最终的实现效果：http://www.hightopo.com/demo/... showImg(https://segmentf...

LeanCloud 2019-08-05 11:17 评论0 收藏0