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

作者:dayu


这是从ECharts官方Demo中拷贝下来的两个样例。当中在布局上用到了HTfor WebSplitView组件将两个chart以上下比例32切割。

光看这个样例并无法非常直观的看出EChartsHT for Web应用的结合,接下来我们来看下HT for Web拓扑图组件与ECharts图形组件的整合效果:

技术分享

在这个Demo中就整合了HTfor WebTree组件,GraphView拓扑图组件和ECharts图形组件。并採用HTfor WebSplitView组件做布局。

说了这么多。如今我们来看下详细代码的实现吧:

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这个类,然后让类具有viewfire的特性。最后在validateImpl方法中详细实现chart的初始化和渲染。

详细的使用就是通过newkeyword来创建ht.Chart的实例。并传入标准的ECharts配置參数,或在new的时候不传參。在创建对象后,通过setOption(option)方法来设置。

最后我为大家录制了详细页面的操作效果视频,欢迎大家赞赏。

http://v.youku.com/v_show/id_XOTEyNzUyNDIw.html



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

原文地址:http://www.cnblogs.com/slgkaifa/p/7220973.html