ECharts整合HT#160;for#160;Web的网络拓扑图应用
ECharts圖形組件在1.0發(fā)布的時候我就已經(jīng)有所關(guān)注,今天在做項目的時候遇到了圖標(biāo)的需求,在HT for Web上也有圖形組件的功能,但是在嘗試了下具體實(shí)現(xiàn)后,發(fā)現(xiàn)HT for Web的圖形組件是以矢量的格式來呈現(xiàn)的,在展現(xiàn)上可以有很多的自定義和數(shù)據(jù)綁定等特性,但是其在交互的設(shè)計上就顯得比較弱勢。
因此我就在想,是否可在項目中將ECharts圖形組件代替HT for Web的圖形組件呢,在對ECharts做了初步的了解后,發(fā)現(xiàn)兩者都是基于Div和canvas的應(yīng)用,于是我開始做大膽的嘗試,終于,功夫不負(fù)苦心人,下面就來看下Demo的具體展現(xiàn)效果吧:
這是從ECharts官方Demo中拷貝下來的兩個例子,其中在布局上用到了HT for Web的SplitView組件將兩個chart以上下比例3:2分割。
光看這個例子并無法很直觀的看出ECharts和HT for Web應(yīng)用的結(jié)合,接下來我們來看下HT for Web拓?fù)鋱D組件與ECharts圖形組件的整合效果:
在這個Demo中就整合了HT for Web的Tree組件,GraphView拓?fù)鋱D組件和ECharts圖形組件,并采用HT for Web的SplitView組件做布局。
說了這么多,現(xiàn)在我們來看下具體代碼的實(shí)現(xiàn)吧:
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();} });
你沒有看錯,最核心的代碼就這些,下面就來介紹下代碼設(shè)計的具體邏輯:
這串代碼其實(shí)很好理解,就是在系統(tǒng)中定義ht.Chart這個類,然后讓類具有view和fire的特性,最后在validateImpl方法中具體實(shí)現(xiàn)chart的初始化和渲染。具體的使用就是通過new關(guān)鍵字來創(chuàng)建ht.Chart的實(shí)例,并傳入標(biāo)準(zhǔn)的ECharts配置參數(shù),或在new的時候不傳參,在創(chuàng)建對象后,通過setOption(option)方法來設(shè)置。
最后我為大家錄制了具體頁面的操作效果視頻,歡迎大家欣賞。
http://v.youku.com/v_show/id_XOTEyNzUyNDIw.html
?
總結(jié)
以上是生活随笔為你收集整理的ECharts整合HT#160;for#160;Web的网络拓扑图应用的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 梦到收拾院子是什么意思
- 下一篇: pygame写游戏,常用代码记录