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

?

總結

以上是生活随笔為你收集整理的ECharts整合HT#160;for#160;Web的网络拓扑图应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。