ECharts整合HT for 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(8)---通过暂停布局提高性能

一种改善控件性能的方法是,当需要对许多单元格进行变动时,可以先保持或挂起重画,直到所有的变动都完成时再进行。通过在对单元格修改和重算时保持重画(挂起布局),然后...

2196
来自专栏前端新视界

关于 CSS 反射倒影的研究思考

原文:The State of CSS Reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览。该文章篇幅较长,内容庞杂...

2769
来自专栏Java架构沉思录

为什么我们做分布式使用 Redis?

绝大部分写业务的程序员,在实际开发中使用 Redis 的时候,只会 Set Value 和 Get Value 两个操作,对 Redis 整体缺乏一个认知。这里...

1084
来自专栏熊二哥

Java缓存深入理解

对于缓存大家都不会陌生,但如何正确和合理的使用缓存还是需要一定的思考,本文将基于Java技术栈对缓存做一个相对详细的介绍,内容分为基本概念、本地缓存、远程缓存和...

1.2K9
来自专栏ThoughtWorks

解读GraphQL|洞见

今天我们解读一下2016年11月期技术雷达中的GraphQL,它位于语言象限,处于评估阶段,编号整100,非常方便查找……这项技术比较有意思。对我来说,技术雷达...

3357
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(3)---行列操作

开发人员可以定义用户与行和列的交互,如是否可以更改行或列的大小、是否可以移动行或列、冻结指定的行或列、在行或列中查找数据等。 更改行或列的大小 你可以允许用户重...

2516
来自专栏进击的程序猿

The Clean Architecture in PHP 读书笔记(六)之你不知道的MVCMVC和其的局限性

前面介绍了一些基础内容,涉及到了去耦的5大工具,本章开始讲介绍本书的重点:Clean Architecture,Clean Architecture通过我们之前...

842
来自专栏腾讯NEXT学位

NativeScript和React Native对比

1861
来自专栏糊一笑

模拟制作网易云音乐(AudioContext)

记得好早前在慕课网上看到一款可视化音乐播放器,当前是觉得很是神奇,还能这么玩。由于当时刚刚转行不久,好多东西看得稀里糊涂不明白,于是趁着现在有时间又重新梳理了一...

3355
来自专栏逸鹏说道

写让别人能读懂的代码+网页性能管理详解

随着软件行业的不断发展,历史遗留的程序越来越多,代码的维护成本越来越大,甚至大于开发成本。而新功能的开发又常常依赖于旧代码,阅读旧代码所花费的时间几乎要大于写...

3059

扫码关注云+社区