項目需求是飛線地圖，但是目前飛線還沒實現(xiàn)，直接上代碼郁惜，效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<!-- 引入 echarts.js -->
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script src="js/layer/layer.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大形猩稀（寬高）的Dom -->
<div id="main" style="width:100%; height:1000px;"></div>
<script type="text/javascript">
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
var series = []; //地圖展現(xiàn)數(shù)據(jù)
var series = []; //地圖展現(xiàn)數(shù)據(jù)
//24個省市經(jīng)度緯度
var geoCoordMap = {
'陜西': [109.503789, 35.860026],
'西安': [108.946466, 34.347269],
'甘肅': [103.832478, 36.065465],
'蘭州': [103.84044, 36.067321],
'新疆': [87.633473, 43.799238],
'烏魯木齊': [87.62444, 43.830763],
'內(nèi)蒙古': [111.772606, 40.823156],
'包頭': [109.846544, 40.662929],
'青海': [101.786462, 36.627159],
'西寧': [101.78443, 36.623393],
'寧夏': [106.265605, 38.476878],
'銀川': [106.258602, 38.487834],
'四川': [104.073467, 30.577543],
'成都': [104.081534, 30.655822],
'重慶': [106.558434, 29.568996],
'西藏': [91.124342, 29.652894],
'拉薩': [91.120789, 29.65005],
'云南': [101.592952, 24.864213],
'昆明': [102.852448, 24.873998],
'麗江': [100.233026,26.872108],
'貴州': [106.714476, 26.60403],
'貴陽': [106.636577, 26.653325],
'廣西': [108.924274, 23.552255],
'南寧': [108.373451, 22.822607],
'山西': [112.515496, 37.866566],
'太原': [112.534919, 37.873219],
'河南': [101.556307, 34.51139],
'鄭州': [113.631419, 34.753439],
'湖北': [112.410562, 31.209316],
'武漢': [114.311582, 30.598467],
'湖南': [111.720664, 27.695864],
'長沙': [112.945473, 28.234889],
'江西': [115.676082, 27.757258],
'南昌': [115.864589, 28.689455],
'安徽': [117.33054, 31.734294],
'合肥': [117.233443, 31.826578],
'上海': [121.480539, 31.235929],
'浙江': [120.159533, 30.271548],
'杭州': [120.215503, 30.253087],
'廣東': [113.394818, 23.408004],
'廣州': [113.271431, 23.135336],
'北京': [116.413384, 39.910925],
'天津': [117.209523, 39.093668],
'河北': [117.220297, 39.173149],
'唐山': [118.186459, 39.636584],
};
option = {
backgroundColor: "#123456",
color: ['#fc5353', '#f4fc6c', '#e68b55', '#9a68ff', '#ff60c5'],
visualMap: {
min: 1000,
max: 5000,
calculable: true,
right: '32%',
bottom: '6%',
zlevel: 10,
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
if (params.value) {
return params.name + ' : ' + params.value[2];
} else {
return params.name;
}
}
},
legend: {
orient: 'horizontal',
left: '27%',
top: '5%',
data: ['高線'],
textStyle: {
color: '#ffffff'
},
icon: 'circle'
},
geo: {
map: 'china',
zlevel: 10,
layoutCenter: ['48%', '43%'],
roam: true,
layoutSize: "100%",
zoom: 1.08,
label: {
normal: {
show: true, //地圖上的省份名稱是否顯示
textStyle: {
fontSize: 12,
color: '#43D0D6'
}
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#062031',
borderWidth: 1.1,
borderColor: '#43D0D6'
},
emphasis: {
areaColor: '#43D0D6'
}
}
},
series: series
};
myChart.setOption(option);
</script>
</body>
</html>
