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

標籤：this   tee   can   default   tree   log   creat   展現   enter   

ECharts圖形組件在1.0公布的時候我就已經有所關注。今天在做項目的時候遇到了表徵圖的需求，在HTfor Web上也有圖形組件的功能。可是在嘗試了下詳細實現後，發現HT for Web的圖形組件是以向量的格式來呈現的，在展現上能夠有非常多的自己定義和資料繫結等特性，可是其在互動的設計上就顯得比較弱勢。

因此我就在想。是否可在項目中將ECharts圖形組件取代HTfor Web的圖形組件呢，在對ECharts做了初步的瞭解後。發現兩者都是基於Div和canvas的應用。於是我開始做大膽的嘗試，最終，功夫不負苦心人，以下就來看下Demo的詳細展現效果吧：

這是從ECharts官方Demo中拷貝下來的兩個範例。當中在布局上用到了HTfor Web的SplitView組件將兩個chart以上下比例3：2切割。

光看這個範例並無法非常直觀的看出ECharts和HT for Web應用的結合，接下來我們來看下HT for Web拓撲圖組件與ECharts圖形組件的整合效果：

在這個Demo中就整合了HTfor Web的Tree組件，GraphView拓撲圖組件和ECharts圖形組件。並採用HTfor 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的初始化和渲染。

詳細的使用就是通過newkeyword來建立ht.Chart的執行個體。並傳入標準的ECharts配置參數，或在new的時候不傳參。在建立對象後，通過setOption(option)方法來設定。

最後我為大家錄製了詳細頁面的操作效果視頻，歡迎大家讚賞。

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

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