前一篇談及到了ECharts整合HT for Web的網絡拓撲圖應用，后來在ECharts的Demo中看到了有關空氣質量的相關報表應用，就想將百度地圖、ECharts和HT for Web三者結合起來也做一個類似空氣質量報告的報表+拓撲圖應用，于是有了下面的Demo：

在這個Demo中，將GraphView拓撲圖組件添加到百度地圖組件中，覆蓋在百度地圖組件之上，并且在百度地圖組件上和GraphView拓撲圖組件上分別添加事件監聽，相互同步經緯度和屏幕位置信息，從而來控制拓撲圖上的組件位置固定在地圖上，并在節點和節點之間的連線上加上了流動屬性。右下角的圖標框是采用HT for Web的Panel面板組件結合ECharts圖表組件完成的。

接下來我們來看看具體的代碼實現：

1.百度地圖是如何與HT for Web組件結合的；

map = new BMap.Map("map");

var view = graphView.getView();

view.className = 'graphView';

var mapDiv = document.getElementById('map');

mapDiv.firstChild.firstChild.appendChild(view);

首先需要在body中存在id為map的div，再通過百度地圖的api來創建一個map地圖對象，然后創建GraphView拓撲圖組件，并獲取GraphView組件中的view，最后將view添加到id為map的div的第二代孩子節點中。這時候問題就來了，為什么要將view添加到map的第二代孩子節點中呢，當你審查元素時你會發現這個div是百度地圖的遮罩層，將view添加到上面，會使view會是在地圖的頂層可見，不會被地圖所遮擋。

2.百度地圖和GraphView的事件監聽；

map.addEventListener('moveend', function(e){

resetPosition();

});

map.addEventListener('dragend', function(e){

resetPosition();

});

map.addEventListener('zoomend', function(e){

resetPosition();

});

graphView.handleScroll = function(){};

graphView.handlePinch = function(){};

function resetPosition(e){

graphView.tx(0);

graphView.ty(0);

dataModel.each(function(data){

var lonLat, position;

if(data instanceof ht.HtmlNode){

if(data.getId() != 'chartTotal') {

position = data.getHost().getPosition();

position = {x: position.x + 168, y: position.y + 158};

data.setPosition(position.x, position.y);

}

} else if(data instanceof ht.Node){

lonLat = data.lonLat;

position = map.pointToPixel(lonLat);

data.setPosition(position.x,position.y);

}

});

}

首先監聽map的三個事件：moveend、 dragend、 zoomend，這三個事件做了同一件事--修改DataModel中所有data的position屬性，讓其在屏幕上的坐標與地圖同步，然后將GraphView的Scroll和Pinch兩個事件的執行函數設置為空函數，就是當監聽到Scroll或者Pinch事件時不做任何的處理，將這兩個事件交給map來處理。

在resetPosition函數中，做的事情很簡單：遍歷DataModel中的data，根據它們各自在地圖上的經緯度來換算成屏幕坐標，并將坐標設置到相應的data中，從而達到GraphView中的節點能夠固定在地圖上的效果。

3.創建右下角的圖表組件：

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;

self._chart = echarts.init(self.getView());

if(option)

self._chart.setOption(option);

self._FIRST = true;

};

ht.Default.def('ht.Chart', Object, {

ms_v: 1,

ms_fire: 1,

ms_ac: ['chart', 'option', 'isFirst', 'view'],

validateImpl: function(){

var self = this,

chart = self._chart;

chart.resize();

if(self._FIRST){

self._FIRST = false;

chart.restore();

}

},

setSize: function(w, h){

var view = this._view;

view.style.width = w + 'px';

view.style.height = h + 'px';

}

});

function createPanel(title, width, height){

chart = new ht.Chart(option);

var c = chart.getChart();

c.on(echarts.config.EVENT.LEGEND_SELECTED, legendSelectedFun);

var chartPanel = new ht.widget.Panel({

title: title,

restoreToolTip: "Overview

總結

以上是生活随笔為你收集整理的echarts label固定位置_ECharts+百度地图网络拓扑应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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