Echarts结合百度地图API
下面的代码运用到了Echarts 和百度地图API,地图的样式自定义的。(效果图在最下边)
运用到了百度API中的自定义控件,监听事件addEventListener(),添加控件addControl(),添加覆盖物addOverlay()
移除覆盖物removeOverlay()
//运用Echarts图标表的标准步骤首先需要初始化一个Echarts对象,可以简单理解为定义显示图标显示的位置。
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/jquery/jquery.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=nfeXoUbpxqp5FTKyxtcLkEiKNaAGpa8H"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("allmap");
var myChart = echarts.init(dom);
var geoCoordMap = {
'牛街北口':[116.370029,39.895302],
'牛街南口':[116.370119,39.88933],
'四条路口':[116.369055,39.892354],
'输入胡同':[116.372527,39.892465],
'吐鲁番餐厅':[116.370506,39.893743],
'西城区牛街街道公共服务大厅':[116.370434,39.893221],
'牛街清真超市':[116.369855,39.89312],
'聚宝源':[116.369819,39.892671],
'老城伊':[116.369891,39.891169],
'圣芳商厦':[116.369742,39.890851],
'牛街礼拜寺':[116.37131,39.891591],
};
var BJData=[];
for(var x in geoCoordMap){
// if(x=='牛街礼拜寺')
// continue;
BJData.push(
[{
name: x,
value: Math.random()*100
}, {
name: '牛街礼拜寺'
}]
)
}
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
});
}
}
return res;
};
var convertData2 = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[1].name];
var toCoord = geoCoordMap[dataItem[0].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[1].name,
toName: dataItem[0].name,
coords: [fromCoord, toCoord]
});
}
}
return res;
};
var covertColor = function(data){
var value= data[1].value;
var result = 'aqua';
if(value>80){
result = '#ff3333';
}else if(value>60){
result = 'orange';
}else if(value>40