ECharts整合HT for Web的網路拓撲圖應用

圖撲軟體發表於2015-03-16
EchartsWeb

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

 

相關文章