开始写js代码
// 1.初始化
var dom = document.getElementById("map");
var myChart = echarts.init(dom);
// 2.数据准备
// 国家的坐标
var geoCoordMap = {
"中国":[104.195397,35.86166],
"日本":[138.252924,36.204824],
"韩国":[127.766922,35.907757],
}；
// 需要标注的国家数据
var data =[ {name: '中国', value: 300},
{name: '日本', value: 150},
{name: '韩国', value: 200},];
// 将点的中文位置转为经纬度坐标
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
//console.log(res);
return res;
};
// 对于线的数据处理
var data2 = [
[{name:'日本'},{name:'中国'}],
[{name:'韩国'},{name:'日本'}]
];
var convertData2 = 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([
{
coord: fromCoord,
},
{
coord: toCoord,
},
]);
}
}
return res;
};
// 3.配置项设置
//飞线图标
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var option = {
title: {
text: '企业贸易区域分布',
left: 'center'
},
tooltip : {
formatter: function(params) {
return (
"贸易金额"+'<br/> '+
params.name +' '+ ' : ' +params.value[2]
);
}
},
bmap: {
center:[104.195397,35.86166],
zoom: 5,
roam: true,//是否可拖拽
mapStyle: {
styleJson: [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#75cff0'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#e4ecc2'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
//'visibility': 'off'
'color': '#cccccc'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fef6c0'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#c0b950'
}
}, {
'featureType': 'poi',
'elementType': 'all',
'stylers': {
//'visibility': 'off'
'color': '#c08673'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}]
}
},
series : [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'bmap',
//symbol:'pin',
//symbol:'image:///static/img/坐标.png',
symbol:'path://M0,-28 C4.97056275,-28 9,-24.00634644 9,-19.07992512 C9,-17.8616986 8.75360187,-16.7005104 8.30750495,-15.642645 C7.4180692,-13.7976331 6.60280551,-12.1374788 5.86171387,-10.6522416 L5.49734905,-9.9241533 C2.09460285,-3.1449169 0.365363613,-0.2748662 0.309631348,-0.2486559 C0.152069092,0.0828853 -0.279388428,0.0828853 -0.451770485,-0.2486559 L-8.30750495,-15.642645 C-8.75360187,-16.7005104 -9,-17.8616986 -9,-19.07992512 C-9,-24.00634644 -4.97056275,-28 0,-28 Z M0,-22 C-1.65685425,-22 -3,-20.65685425 -3,-19 C-3,-17.3431458 -1.65685425,-16 0,-16 C1.65685425,-16 3,-17.3431458 3,-19 C3,-20.65685425 1.65685425,-22 0,-22 Z',
color:'#d10007',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
encode: {
value: 2
},
label: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
label: {
show: true
}
}
},
{
type: 'lines',
coordinateSystem: 'bmap',
zlevel: 10,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: 'red',
symbol: planePath,
symbolSize: 3
},
lineStyle: {
normal: {
color: '#a6c84c',
width:1,
opacity: 0.4,
curveness: 0.2
}
},
data: convertData2(data2)
}
]
};
4.最后渲染生成地图
myChart.setOption(option);
4.其它拓展
1）如果想把地图上的地名，省份等文字标签都隐藏，可在mapStyle属性中设置
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": {
//"color": "#ff452c",
"visibility": "off"
}
},
还有一些其他的拓展功能没有写出来，后面再更新吧。
注：以上只有一步是需要申请自己的百度地图的api key调用，其他的都可以直接用，大家也可以在我的基础上进行扩展。
