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 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

JS案例 - 基于vue的移动端长按手势

当时首先想到要做长按事件的时候,我想到的是vue内部的自定义指令,毕竟官网里边有这么一句描述:

1432
来自专栏IMWeb前端团队

iconfont关于content值的坑

font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。 //可以设置某个字对应的形状,当...

19910
来自专栏程序猿

用 Python 向你比个心

之前写了一篇用 Python 画一个小猪佩奇和哆啦 A 梦,然后最近看到有人用 turtle 画了一个心,觉得挺有意思的,于是把代码复制到本地,再加了个播放音乐...

1995
来自专栏数据小魔方

符号的艺术

今天跟大家聊聊ppt中的符号艺术——项目符号! ▼▼▼ 大家在word排版过程中,如果内容很长并且逻辑性很强的话,都会下意识的使用项目符号,使得文章结构分明,逻...

3695
来自专栏张善友的专栏

初探ReactJS.NET 开发

ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手。它由Facebook创建,并在2013年首次发布。Facebook认为React在处...

2115
来自专栏進无尽的文章

UI篇-自定义控件中关于父试图中的键盘遮挡问题

我们平时在设计页面的时候,考虑到MVC的设计模式会出现很多层的试图分离,这里面就不可以避免的出现自定的控件。 我在一次自定义控件中出现了以下问题,记录在案以供...

551
来自专栏编程直播室

WebGL 动画

1624
来自专栏腾讯NEXT学位

CSS模块化的演进

? | 导语 CSS 做为 Web 技术的基石,从一开始就展示出了巨大的潜力。它的入门非常简单,你只需为元素定义好样式属性和值。然而 CSS 特性随着规范的升...

1812
来自专栏小狼的世界

CSS中的计数器

     <p>Place the flour in a large bowl, make a well in the centre and pour in t...

761
来自专栏企鹅号快讯

坚定地使用 CSS Custom Properties

好久没译文,最近看到这篇 Getting Hardboiled with CSS Custom Properties。觉得不错,翻译出来给大家。现在 CSS 新...

1907

扫码关注云+社区