<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>
<script src="bmap.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 1366px;height:768px;background: aqua"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var geoCoordMap = {
'合肥市':[117.37,31.386],
'六安市':[116.27,31.786],
'滁州市':[118.07,32.486],
'蚌埠市':[117.27,33.086],
'淮南市':[116.67,32.786],
'宿州市':[117.77,33.486],
'淮北市':[116.67,33.686],
'亳州市':[116.27,33.386],
'阜陽市':[115.57,32.986],
'安慶市':[116.47,30.486],
'池州市':[117.47,30.386],
'黃山市':[118.17,29.886],
'宣城市':[119.27,30.916],
'蕪湖市':[118.17,31.186],
'馬鞍山市':[118.47,31.616],
'銅陵市':[117.87,30.956],
};
var oneData = [
[{name: "合肥市"},{name: "六安市",value: 20}],
[{name: "合肥市"},{name: "滁州市",value: 20}],
[{name: "合肥市"},{name: "蚌埠市",value: 20}],
[{name: "合肥市"},{name: "淮南市",value: 20}],
[{name: "合肥市"},{name: "宿州市",value: 20}],
[{name: "合肥市"},{name: "淮北市",value: 20}],
[{name: "合肥市"},{name: "亳州市",value: 20}],
[{name: "合肥市"},{name: "阜陽市",value: 20}],
[{name: "合肥市"},{name: "安慶市",value: 20}],
[{name: "合肥市"},{name: "池州市",value: 20}],
[{name: "合肥市"},{name: "黃山市",value: 20}],
[{name: "合肥市"},{name: "宣城市",value: 20}],
[{name: "合肥市"},{name: "蕪湖市",value: 20}],
[{name: "合肥市"},{name: "馬鞍山市",value: 20}],
[{name: "合肥市"},{name: "銅陵市",value: 20}]
];
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 convertData = 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,
value:dataItem[1].value,
coords: [fromCoord, toCoord]
});
}
}
return res;
};
var color = ["#a6c84c", "#ffa022", "#46bee9"];
var series = [];
[
["合肥市", oneData],
/*
["5", twoData],
["9", threeData]
*/
].forEach(function(
item,
i
) {
//console.log(item[1])
series.push({
name: item[0],
type: "effectScatter",
coordinateSystem: "bmap",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: function(val) {
return val[2] / 4;
},
showEffectOn: "render",
itemStyle: {
normal: {
color: color[i]
}
},
data: [{
name: item[0],
value: geoCoordMap[item[0]].concat([100])
}]
}, {
name: item[0] + " Top10",
type: "lines",
coordinateSystem: "bmap",
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: "#fff",
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
}, {
name: item[0] + " Top10",
type: "lines",
coordinateSystem: "bmap",
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: convertData(item[1])
}, {
name: item[0] + " Top10",
type: "effectScatter",
coordinateSystem: "bmap",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: function(val) {
return val[2] / 4;
},
showEffectOn: "render",
itemStyle: {
normal: {
color: color[i]
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
var option = {
bmap: {
// 百度地圖中心經緯度 座標拾取器http://api.map.baidu.com/lbsapi/getpoint/index.html
center: [117.37,31.386],
// 百度地圖縮放等級，數字越大，放大越大，地圖比例尺越小
zoom: 8,
// 是否開啓拖拽縮放，可以只設置 'scale' 或者 'move'
roam: false,
// mapStyle是百度地圖的自定義樣式，見 http://developer.baidu.com/map/custom/
mapStyle: {
styleJson: [{
featureType: "water",
elementType: "all",
stylers: {
color: "#021019"
}
},
{
featureType: "highway",
elementType: "geometry.fill",
stylers: {
color: "#000000"
}
},
{
featureType: "highway",
elementType: "geometry.stroke",
stylers: {
color: "#147a92"
}
},
{
featureType: "arterial",
elementType: "geometry.fill",
stylers: {
color: "#000000"
}
},
{
featureType: "arterial",
elementType: "geometry.stroke",
stylers: {
color: "#0b3d51"
}
},
{
featureType: "local",
elementType: "geometry",
stylers: {
color: "#000000"
}
},
{
featureType: "land",
elementType: "all",
stylers: {
color: "#08304b"
}
},
{
featureType: "railway",
elementType: "geometry.fill",
stylers: {
color: "#000000"
}
},
{
featureType: "railway",
elementType: "geometry.stroke",
stylers: {
color: "#08304b"
}
},
{
featureType: "subway",
elementType: "geometry",
stylers: {
lightness: -70
}
},
{
featureType: "building",
elementType: "geometry.fill",
stylers: {
color: "#000000"
}
},
{
featureType: "all",
elementType: "labels.text.fill",
stylers: {
color: "#857f7f"
}
},
{
featureType: "all",
elementType: "labels.text.stroke",
stylers: {
color: "#000000"
}
},
{
featureType: "building",
elementType: "geometry",
stylers: {
color: "#022338"
}
},
{
featureType: "green",
elementType: "geometry",
stylers: {
color: "#062032"
}
},
{
featureType: "boundary",
elementType: "all",
stylers: {
color: "#1e1c1c"
}
},
{
featureType: "manmade",
elementType: "geometry",
stylers: {
color: "#022338"
}
},
{
featureType: "poi",
elementType: "all",
stylers: {
visibility: "off"
}
},
{
featureType: "all",
elementType: "labels.icon",
stylers: {
visibility: "off"
}
},
{
featureType: "all",
elementType: "labels.text.fill",
stylers: {
color: "#2da0c6",
visibility: "on"
}
},
{
featureType: "background",
elementType: "all",
stylers: {
color: "#0e1054ff"
}
}
]
}
},
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
console.log(params);
if (params.seriesType == "effectScatter") {
return params.data.name + ":" + params.data.value[2];
} else if (params.seriesType == "lines") {
return params.data.fromName + "->" + params.data.toName + ":" + params.data.value;
} else {
return params.name;
}
}
},
//series是在地圖上的線條等效果的配置文件，具體可以查閱文檔。
series: series
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
