2017_11_23 學習echarts之餅狀、柱狀、gl(三維柱狀)、map地圖
阿新 • • 發佈：2019-02-18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>ECharts</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="jquery-1.9.1.min.js"></script>
<script src="echarts.min.js"></script>
<script src="china.js"></script>
<style>
#china-map {
width: 1000px;
height: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div id="china-map"></div>
<script>
var myChart = echarts.init(document.getElementById('china-map'));
var data = [ {
name : '海門',
value : 9
}, {
name : '鄂爾多斯',
value : 12
}, {
name : '招遠',
value : 12
}, {
name : '舟山',
value : 12
}, {
name : '齊齊哈爾',
value : 14
}, {
name : '鹽城',
value : 15
}, {
name : '赤峰',
value : 16
}, {
name : '青島',
value : 18
}, {
name : '乳山',
value : 18
}, {
name : '金昌',
value : 19
}, {
name : '泉州',
value : 21
}, {
name : '南通',
value : 23
}, {
name : '拉薩',
value : 24
}, {
name : '雲浮',
value : 24
}, {
name : '上海',
value : 25
}, {
name : '攀枝花',
value : 25
}, {
name : '承德',
value : 25
}, {
name : '汕尾',
value : 26
}, {
name : '丹東',
value : 27
}, {
name : '瓦房店',
value : 30
}, {
name : '延安',
value : 38
}, {
name : '咸陽',
value : 43
}, {
name : '南昌',
value : 54
}, {
name : '柳州',
value : 54
}, {
name : '三亞',
value : 54
}, {
name : '瀘州',
value : 57
}, {
name : '克拉瑪依',
value : 72
} ];
var geoCoordMap = {
'海門' : [ 121.15, 31.89 ],
'鄂爾多斯' : [ 109.781327, 39.608266 ],
'招遠' : [ 120.38, 37.35 ],
'舟山' : [ 122.207216, 29.985295 ],
'齊齊哈爾' : [ 123.97, 47.33 ],
'鹽城' : [ 120.13, 33.38 ],
'赤峰' : [ 118.87, 42.28 ],
'青島' : [ 120.33, 36.07 ],
'乳山' : [ 121.52, 36.89 ],
'金昌' : [ 102.188043, 38.520089 ],
'泉州' : [ 118.58, 24.93 ],
'萊西' : [ 120.53, 36.86 ],
'日照' : [ 119.46, 35.42 ],
'膠南' : [ 119.97, 35.88 ],
'南通' : [ 121.05, 32.08 ],
'拉薩' : [ 91.11, 29.97 ],
'雲浮' : [ 112.02, 22.93 ],
'梅州' : [ 116.1, 24.55 ],
'文登' : [ 122.05, 37.2 ],
'上海' : [ 121.48, 31.22 ],
'攀枝花' : [ 101.718637, 26.582347 ],
'威海' : [ 122.1, 37.5 ],
'承德' : [ 117.93, 40.97 ],
'廈門' : [ 118.1, 24.46 ],
'汕尾' : [ 115.375279, 22.786211 ],
'潮州' : [ 116.63, 23.68 ],
'丹東' : [ 124.37, 40.13 ],
'太倉' : [ 121.1, 31.45 ],
'曲靖' : [ 103.79, 25.51 ],
'煙臺' : [ 121.39, 37.52 ],
'福州' : [ 119.3, 26.08 ],
'瓦房店' : [ 121.979603, 39.627114 ],
'即墨' : [ 120.45, 36.38 ],
'撫順' : [ 123.97, 41.97 ],
'玉溪' : [ 102.52, 24.35 ],
'張家口' : [ 114.87, 40.82 ],
'陽泉' : [ 113.57, 37.85 ],
'萊州' : [ 119.942327, 37.177017 ],
'湖州' : [ 120.1, 30.86 ],
'汕頭' : [ 116.69, 23.39 ],
'崑山' : [ 120.95, 31.39 ],
'寧波' : [ 121.56, 29.86 ],
'湛江' : [ 110.359377, 21.270708 ],
'揭陽' : [ 116.35, 23.55 ],
'榮成' : [ 122.41, 37.16 ],
'連雲港' : [ 119.16, 34.59 ],
'葫蘆島' : [ 120.836932, 40.711052 ],
'常熟' : [ 120.74, 31.64 ],
'東莞' : [ 113.75, 23.04 ],
'河源' : [ 114.68, 23.73 ],
'淮安' : [ 119.15, 33.5 ],
'泰州' : [ 119.9, 32.49 ],
'南寧' : [ 108.33, 22.84 ],
'營口' : [ 122.18, 40.65 ],
'惠州' : [ 114.4, 23.09 ],
'江陰' : [ 120.26, 31.91 ],
'蓬萊' : [ 120.75, 37.8 ],
'韶關' : [ 113.62, 24.84 ],
'嘉峪關' : [ 98.289152, 39.77313 ],
'廣州' : [ 113.23, 23.16 ],
'延安' : [ 109.47, 36.6 ],
'太原' : [ 112.53, 37.87 ],
'清遠' : [ 113.01, 23.7 ],
'中山' : [ 113.38, 22.52 ],
'昆明' : [ 102.73, 25.04 ],
'壽光' : [ 118.73, 36.86 ],
'盤錦' : [ 122.070714, 41.119997 ],
'長治' : [ 113.08, 36.18 ],
'深圳' : [ 114.07, 22.62 ],
'珠海' : [ 113.52, 22.3 ],
'宿遷' : [ 118.3, 33.96 ],
'咸陽' : [ 108.72, 34.36 ],
'銅川' : [ 109.11, 35.09 ],
'平度' : [ 119.97, 36.77 ],
'佛山' : [ 113.11, 23.05 ],
'海口' : [ 110.35, 20.02 ],
'江門' : [ 113.06, 22.61 ],
'章丘' : [ 117.53, 36.72 ],
'肇慶' : [ 112.44, 23.05 ],
'大連' : [ 121.62, 38.92 ],
'臨汾' : [ 111.5, 36.08 ],
'吳江' : [ 120.63, 31.16 ],
'石嘴山' : [ 106.39, 39.04 ],
'瀋陽' : [ 123.38, 41.8 ],
'蘇州' : [ 120.62, 31.32 ],
'茂名' : [ 110.88, 21.68 ],
'嘉興' : [ 120.76, 30.77 ],
'長春' : [ 125.35, 43.88 ],
'膠州' : [ 120.03336, 36.264622 ],
'銀川' : [ 106.27, 38.47 ],
'張家港' : [ 120.555821, 31.875428 ],
'三門峽' : [ 111.19, 34.76 ],
'錦州' : [ 121.15, 41.13 ],
'南昌' : [ 115.89, 28.68 ],
'柳州' : [ 109.4, 24.33 ],
'三亞' : [ 109.511909, 18.252847 ],
'自貢' : [ 104.778442, 29.33903 ],
'吉林' : [ 126.57, 43.87 ],
'陽江' : [ 111.95, 21.85 ],
'瀘州' : [ 105.39, 28.91 ],
'西寧' : [ 101.74, 36.56 ],
'宜賓' : [ 104.56, 29.77 ],
'呼和浩特' : [ 111.65, 40.82 ],
'成都' : [ 104.06, 30.67 ],
'大同' : [ 113.3, 40.12 ],
'鎮江' : [ 119.44, 32.2 ],
'桂林' : [ 110.28, 25.29 ],
'張家界' : [ 110.479191, 29.117096 ],
'宜興' : [ 119.82, 31.36 ],
'北海' : [ 109.12, 21.49 ],
'西安' : [ 108.95, 34.27 ],
'金壇' : [ 119.56, 31.74 ],
'東營' : [ 118.49, 37.46 ],
'牡丹江' : [ 129.58, 44.6 ],
'遵義' : [ 106.9, 27.7 ],
'紹興' : [ 120.58, 30.01 ],
'揚州' : [ 119.42, 32.39 ],
'常州' : [ 119.95, 31.79 ],
'濰坊' : [ 119.1, 36.62 ],
'重慶' : [ 106.54, 29.59 ],
'台州' : [ 121.420757, 28.656386 ],
'南京' : [ 118.78, 32.04 ],
'濱州' : [ 118.03, 37.36 ],
'貴陽' : [ 106.71, 26.57 ],
'無錫' : [ 120.29, 31.59 ],
'本溪' : [ 123.73, 41.3 ],
'克拉瑪依' : [ 84.77, 45.59 ],
'渭南' : [ 109.5, 34.52 ],
'馬鞍山' : [ 118.48, 31.56 ],
'寶雞' : [ 107.15, 34.38 ],
'焦作' : [ 113.21, 35.24 ],
'句容' : [ 119.16, 31.95 ],
'北京' : [ 116.46, 39.92 ],
'徐州' : [ 117.2, 34.26 ],
'衡水' : [ 115.72, 37.72 ],
'包頭' : [ 110, 40.58 ],
'綿陽' : [ 104.73, 31.48 ],
'烏魯木齊' : [ 87.68, 43.77 ],
'棗莊' : [ 117.57, 34.86 ],
'杭州' : [ 120.19, 30.26 ],
'淄博' : [ 118.05, 36.78 ],
'鞍山' : [ 122.85, 41.12 ],
'溧陽' : [ 119.48, 31.43 ],
'庫爾勒' : [ 86.06, 41.68 ],
'安陽' : [ 114.35, 36.1 ],
'開封' : [ 114.35, 34.79 ],
'濟南' : [ 117, 36.65 ],
'德陽' : [ 104.37, 31.13 ],
'溫州' : [ 120.65, 28.01 ],
'九江' : [ 115.97, 29.71 ],
'邯鄲' : [ 114.47, 36.6 ],
'臨安' : [ 119.72, 30.23 ],
'蘭州' : [ 103.73, 36.03 ],
'滄州' : [ 116.83, 38.33 ],
'臨沂' : [ 118.35, 35.05 ],
'南充' : [ 106.110698, 30.837793 ],
'天津' : [ 117.2, 39.13 ],
'富陽' : [ 119.95, 30.07 ],
'泰安' : [ 117.13, 36.18 ],
'諸暨' : [ 120.23, 29.71 ],
'鄭州' : [ 113.65, 34.76 ],
'哈爾濱' : [ 126.63, 45.75 ],
'聊城' : [ 115.97, 36.45 ],
'蕪湖' : [ 118.38, 31.33 ],
'唐山' : [ 118.02, 39.63 ],
'平頂山' : [ 113.29, 33.75 ],
'邢臺' : [ 114.48, 37.05 ],
'德州' : [ 116.29, 37.45 ],
'濟寧' : [ 116.59, 35.38 ],
'荊州' : [ 112.239741, 30.335165 ],
'宜昌' : [ 111.3, 30.7 ],
'義烏' : [ 120.06, 29.32 ],
'麗水' : [ 119.92, 28.45 ],
'洛陽' : [ 112.44, 34.7 ],
'秦皇島' : [ 119.57, 39.95 ],
'株洲' : [ 113.16, 27.83 ],
'石家莊' : [ 114.48, 38.03 ],
'萊蕪' : [ 117.67, 36.19 ],
'常德' : [ 111.69, 29.05 ],
'保定' : [ 115.48, 38.85 ],
'湘潭' : [ 112.91, 27.87 ],
'金華' : [ 119.64, 29.12 ],
'岳陽' : [ 113.09, 29.37 ],
'長沙' : [ 113, 28.21 ],
'衢州' : [ 118.88, 28.97 ],
'廊坊' : [ 116.7, 39.53 ],
'菏澤' : [ 115.480656, 35.23375 ],
'合肥' : [ 117.27, 31.86 ],
'武漢' : [ 114.31, 30.52 ],
'大慶' : [ 125.03, 46.58 ]
};
function convertData(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)
});
}
}
return res;
};
function randomValue() {
return Math.round(Math.random() * 1000);
}
var option = {
tooltip : {},
visualMap : {
min : 0,
max : 1500,
left : 'left',
top : 'bottom',
text : [ 'High', 'Low' ],
seriesIndex : [ 1 ],
inRange : {
color : [ '#83f883', '#11bfc6' ]
},
calculable : true
},
geo : {
map : 'china',
roam : true,
label : {
normal : {
show : true,
textStyle : {
color : 'rgba(0,0,0,0.0)'
}
}
},
itemStyle : {
normal : {
borderColor : '#fff'
},
emphasis : {
areaColor : null,
shadowOffsetX : 0,
shadowOffsetY : 0,
shadowBlur : 20,
borderWidth : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
type : 'scatter',
coordinateSystem : 'geo',
data : convertData(data),
symbolSize : 1,
symbol : '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',
symbolRotate : 35,
label : {
normal : {
formatter : '{b}',
position : 'right',
show : false
},
emphasis : {
show : false
}
},
itemStyle : {
normal : {
color : '#fff'
}
}
}, {
name : 'categoryA',
type : 'map',
geoIndex : 0,
// tooltip: {show: false},
data : [ {
name : '北京',
value : randomValue()
}, {
name : '天津',
value : randomValue()
}, {
name : '上海',
value : randomValue()
}, {
name : '重慶',
value : randomValue()
}, {
name : '河北',
value : randomValue()
}, {
name : '河南',
value : randomValue()
}, {
name : '雲南',
value : randomValue()
}, {
name : '遼寧',
value : randomValue()
}, {
name : '黑龍江',
value : randomValue()
}, {
name : '湖南',
value : randomValue()
}, {
name : '安徽',
value : randomValue()
}, {
name : '山東',
value : randomValue()
}, {
name : '新疆',
value : randomValue()
}, {
name : '江蘇',
value : randomValue()
}, {
name : '浙江',
value : randomValue()
}, {
name : '江西',
value : randomValue()
}, {
name : '湖北',
value : randomValue()
}, {
name : '廣西',
value : randomValue()
}, {
name : '甘肅',
value : randomValue()
}, {
name : '山西',
value : randomValue()
}, {
name : '內蒙古',
value : randomValue()
}, {
name : '陝西',
value : randomValue()
}, {
name : '吉林',
value : randomValue()
}, {
name : '福建',
value : randomValue()
}, {
name : '貴州',
value : randomValue()
}, {
name : '廣東',
value : randomValue()
}, {
name : '青海',
value : randomValue()
}, {
name : '西藏',
value : randomValue()
}, {
name : '四川',
value : randomValue()
}, {
name : '寧夏',
value : randomValue()
}, {
name : '海南',
value : randomValue()
}, {
name : '臺灣',
value : randomValue()
}, {
name : '香港',
value : randomValue()
}, {
name : '澳門',
value : randomValue()
} ]
} ]
};
myChart.setOption(option);
myChart.on('mouseover', function(params) {
var dataIndex = params.dataIndex;
console.log(params);
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>ECharts</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="jquery-1.9.1.min.js"></script>
<script src="echarts.min.js"></script>
<script src="china.js"></script>
<style>
#china-map {
width: 1000px;
height: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div id="china-map"></div>
<script>
var myChart = echarts.init(document.getElementById('china-map'));
var data = [ {
name : '海門',
value : 9
}, {
name : '鄂爾多斯',
value : 12
}, {
name : '招遠',
value : 12
}, {
name : '舟山',
value : 12
}, {
name : '齊齊哈爾',
value : 14
}, {
name : '鹽城',
value : 15
}, {
name : '赤峰',
value : 16
}, {
name : '青島',
value : 18
}, {
name : '乳山',
value : 18
}, {
name : '金昌',
value : 19
}, {
name : '泉州',
value : 21
}, {
name : '南通',
value : 23
}, {
name : '拉薩',
value : 24
}, {
name : '雲浮',
value : 24
}, {
name : '上海',
value : 25
}, {
name : '攀枝花',
value : 25
}, {
name : '承德',
value : 25
}, {
name : '汕尾',
value : 26
}, {
name : '丹東',
value : 27
}, {
name : '瓦房店',
value : 30
}, {
name : '延安',
value : 38
}, {
name : '咸陽',
value : 43
}, {
name : '南昌',
value : 54
}, {
name : '柳州',
value : 54
}, {
name : '三亞',
value : 54
}, {
name : '瀘州',
value : 57
}, {
name : '克拉瑪依',
value : 72
} ];
var geoCoordMap = {
'海門' : [ 121.15, 31.89 ],
'鄂爾多斯' : [ 109.781327, 39.608266 ],
'招遠' : [ 120.38, 37.35 ],
'舟山' : [ 122.207216, 29.985295 ],
'齊齊哈爾' : [ 123.97, 47.33 ],
'鹽城' : [ 120.13, 33.38 ],
'赤峰' : [ 118.87, 42.28 ],
'青島' : [ 120.33, 36.07 ],
'乳山' : [ 121.52, 36.89 ],
'金昌' : [ 102.188043, 38.520089 ],
'泉州' : [ 118.58, 24.93 ],
'萊西' : [ 120.53, 36.86 ],
'日照' : [ 119.46, 35.42 ],
'膠南' : [ 119.97, 35.88 ],
'南通' : [ 121.05, 32.08 ],
'拉薩' : [ 91.11, 29.97 ],
'雲浮' : [ 112.02, 22.93 ],
'梅州' : [ 116.1, 24.55 ],
'文登' : [ 122.05, 37.2 ],
'上海' : [ 121.48, 31.22 ],
'攀枝花' : [ 101.718637, 26.582347 ],
'威海' : [ 122.1, 37.5 ],
'承德' : [ 117.93, 40.97 ],
'廈門' : [ 118.1, 24.46 ],
'汕尾' : [ 115.375279, 22.786211 ],
'潮州' : [ 116.63, 23.68 ],
'丹東' : [ 124.37, 40.13 ],
'太倉' : [ 121.1, 31.45 ],
'曲靖' : [ 103.79, 25.51 ],
'煙臺' : [ 121.39, 37.52 ],
'福州' : [ 119.3, 26.08 ],
'瓦房店' : [ 121.979603, 39.627114 ],
'即墨' : [ 120.45, 36.38 ],
'撫順' : [ 123.97, 41.97 ],
'玉溪' : [ 102.52, 24.35 ],
'張家口' : [ 114.87, 40.82 ],
'陽泉' : [ 113.57, 37.85 ],
'萊州' : [ 119.942327, 37.177017 ],
'湖州' : [ 120.1, 30.86 ],
'汕頭' : [ 116.69, 23.39 ],
'崑山' : [ 120.95, 31.39 ],
'寧波' : [ 121.56, 29.86 ],
'湛江' : [ 110.359377, 21.270708 ],
'揭陽' : [ 116.35, 23.55 ],
'榮成' : [ 122.41, 37.16 ],
'連雲港' : [ 119.16, 34.59 ],
'葫蘆島' : [ 120.836932, 40.711052 ],
'常熟' : [ 120.74, 31.64 ],
'東莞' : [ 113.75, 23.04 ],
'河源' : [ 114.68, 23.73 ],
'淮安' : [ 119.15, 33.5 ],
'泰州' : [ 119.9, 32.49 ],
'南寧' : [ 108.33, 22.84 ],
'營口' : [ 122.18, 40.65 ],
'惠州' : [ 114.4, 23.09 ],
'江陰' : [ 120.26, 31.91 ],
'蓬萊' : [ 120.75, 37.8 ],
'韶關' : [ 113.62, 24.84 ],
'嘉峪關' : [ 98.289152, 39.77313 ],
'廣州' : [ 113.23, 23.16 ],
'延安' : [ 109.47, 36.6 ],
'太原' : [ 112.53, 37.87 ],
'清遠' : [ 113.01, 23.7 ],
'中山' : [ 113.38, 22.52 ],
'昆明' : [ 102.73, 25.04 ],
'壽光' : [ 118.73, 36.86 ],
'盤錦' : [ 122.070714, 41.119997 ],
'長治' : [ 113.08, 36.18 ],
'深圳' : [ 114.07, 22.62 ],
'珠海' : [ 113.52, 22.3 ],
'宿遷' : [ 118.3, 33.96 ],
'咸陽' : [ 108.72, 34.36 ],
'銅川' : [ 109.11, 35.09 ],
'平度' : [ 119.97, 36.77 ],
'佛山' : [ 113.11, 23.05 ],
'海口' : [ 110.35, 20.02 ],
'江門' : [ 113.06, 22.61 ],
'章丘' : [ 117.53, 36.72 ],
'肇慶' : [ 112.44, 23.05 ],
'大連' : [ 121.62, 38.92 ],
'臨汾' : [ 111.5, 36.08 ],
'吳江' : [ 120.63, 31.16 ],
'石嘴山' : [ 106.39, 39.04 ],
'瀋陽' : [ 123.38, 41.8 ],
'蘇州' : [ 120.62, 31.32 ],
'茂名' : [ 110.88, 21.68 ],
'嘉興' : [ 120.76, 30.77 ],
'長春' : [ 125.35, 43.88 ],
'膠州' : [ 120.03336, 36.264622 ],
'銀川' : [ 106.27, 38.47 ],
'張家港' : [ 120.555821, 31.875428 ],
'三門峽' : [ 111.19, 34.76 ],
'錦州' : [ 121.15, 41.13 ],
'南昌' : [ 115.89, 28.68 ],
'柳州' : [ 109.4, 24.33 ],
'三亞' : [ 109.511909, 18.252847 ],
'自貢' : [ 104.778442, 29.33903 ],
'吉林' : [ 126.57, 43.87 ],
'陽江' : [ 111.95, 21.85 ],
'瀘州' : [ 105.39, 28.91 ],
'西寧' : [ 101.74, 36.56 ],
'宜賓' : [ 104.56, 29.77 ],
'呼和浩特' : [ 111.65, 40.82 ],
'成都' : [ 104.06, 30.67 ],
'大同' : [ 113.3, 40.12 ],
'鎮江' : [ 119.44, 32.2 ],
'桂林' : [ 110.28, 25.29 ],
'張家界' : [ 110.479191, 29.117096 ],
'宜興' : [ 119.82, 31.36 ],
'北海' : [ 109.12, 21.49 ],
'西安' : [ 108.95, 34.27 ],
'金壇' : [ 119.56, 31.74 ],
'東營' : [ 118.49, 37.46 ],
'牡丹江' : [ 129.58, 44.6 ],
'遵義' : [ 106.9, 27.7 ],
'紹興' : [ 120.58, 30.01 ],
'揚州' : [ 119.42, 32.39 ],
'常州' : [ 119.95, 31.79 ],
'濰坊' : [ 119.1, 36.62 ],
'重慶' : [ 106.54, 29.59 ],
'台州' : [ 121.420757, 28.656386 ],
'南京' : [ 118.78, 32.04 ],
'濱州' : [ 118.03, 37.36 ],
'貴陽' : [ 106.71, 26.57 ],
'無錫' : [ 120.29, 31.59 ],
'本溪' : [ 123.73, 41.3 ],
'克拉瑪依' : [ 84.77, 45.59 ],
'渭南' : [ 109.5, 34.52 ],
'馬鞍山' : [ 118.48, 31.56 ],
'寶雞' : [ 107.15, 34.38 ],
'焦作' : [ 113.21, 35.24 ],
'句容' : [ 119.16, 31.95 ],
'北京' : [ 116.46, 39.92 ],
'徐州' : [ 117.2, 34.26 ],
'衡水' : [ 115.72, 37.72 ],
'包頭' : [ 110, 40.58 ],
'綿陽' : [ 104.73, 31.48 ],
'烏魯木齊' : [ 87.68, 43.77 ],
'棗莊' : [ 117.57, 34.86 ],
'杭州' : [ 120.19, 30.26 ],
'淄博' : [ 118.05, 36.78 ],
'鞍山' : [ 122.85, 41.12 ],
'溧陽' : [ 119.48, 31.43 ],
'庫爾勒' : [ 86.06, 41.68 ],
'安陽' : [ 114.35, 36.1 ],
'開封' : [ 114.35, 34.79 ],
'濟南' : [ 117, 36.65 ],
'德陽' : [ 104.37, 31.13 ],
'溫州' : [ 120.65, 28.01 ],
'九江' : [ 115.97, 29.71 ],
'邯鄲' : [ 114.47, 36.6 ],
'臨安' : [ 119.72, 30.23 ],
'蘭州' : [ 103.73, 36.03 ],
'滄州' : [ 116.83, 38.33 ],
'臨沂' : [ 118.35, 35.05 ],
'南充' : [ 106.110698, 30.837793 ],
'天津' : [ 117.2, 39.13 ],
'富陽' : [ 119.95, 30.07 ],
'泰安' : [ 117.13, 36.18 ],
'諸暨' : [ 120.23, 29.71 ],
'鄭州' : [ 113.65, 34.76 ],
'哈爾濱' : [ 126.63, 45.75 ],
'聊城' : [ 115.97, 36.45 ],
'蕪湖' : [ 118.38, 31.33 ],
'唐山' : [ 118.02, 39.63 ],
'平頂山' : [ 113.29, 33.75 ],
'邢臺' : [ 114.48, 37.05 ],
'德州' : [ 116.29, 37.45 ],
'濟寧' : [ 116.59, 35.38 ],
'荊州' : [ 112.239741, 30.335165 ],
'宜昌' : [ 111.3, 30.7 ],
'義烏' : [ 120.06, 29.32 ],
'麗水' : [ 119.92, 28.45 ],
'洛陽' : [ 112.44, 34.7 ],
'秦皇島' : [ 119.57, 39.95 ],
'株洲' : [ 113.16, 27.83 ],
'石家莊' : [ 114.48, 38.03 ],
'萊蕪' : [ 117.67, 36.19 ],
'常德' : [ 111.69, 29.05 ],
'保定' : [ 115.48, 38.85 ],
'湘潭' : [ 112.91, 27.87 ],
'金華' : [ 119.64, 29.12 ],
'岳陽' : [ 113.09, 29.37 ],
'長沙' : [ 113, 28.21 ],
'衢州' : [ 118.88, 28.97 ],
'廊坊' : [ 116.7, 39.53 ],
'菏澤' : [ 115.480656, 35.23375 ],
'合肥' : [ 117.27, 31.86 ],
'武漢' : [ 114.31, 30.52 ],
'大慶' : [ 125.03, 46.58 ]
};
function convertData(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)
});
}
}
return res;
};
function randomValue() {
return Math.round(Math.random() * 1000);
}
var option = {
tooltip : {},
visualMap : {
min : 0,
max : 1500,
left : 'left',
top : 'bottom',
text : [ 'High', 'Low' ],
seriesIndex : [ 1 ],
inRange : {
color : [ '#83f883', '#11bfc6' ]
},
calculable : true
},
geo : {
map : 'china',
roam : true,
label : {
normal : {
show : true,
textStyle : {
color : 'rgba(0,0,0,0.0)'
}
}
},
itemStyle : {
normal : {
borderColor : '#fff'
},
emphasis : {
areaColor : null,
shadowOffsetX : 0,
shadowOffsetY : 0,
shadowBlur : 20,
borderWidth : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
type : 'scatter',
coordinateSystem : 'geo',
data : convertData(data),
symbolSize : 1,
symbol : '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',
symbolRotate : 35,
label : {
normal : {
formatter : '{b}',
position : 'right',
show : false
},
emphasis : {
show : false
}
},
itemStyle : {
normal : {
color : '#fff'
}
}
}, {
name : 'categoryA',
type : 'map',
geoIndex : 0,
// tooltip: {show: false},
data : [ {
name : '北京',
value : randomValue()
}, {
name : '天津',
value : randomValue()
}, {
name : '上海',
value : randomValue()
}, {
name : '重慶',
value : randomValue()
}, {
name : '河北',
value : randomValue()
}, {
name : '河南',
value : randomValue()
}, {
name : '雲南',
value : randomValue()
}, {
name : '遼寧',
value : randomValue()
}, {
name : '黑龍江',
value : randomValue()
}, {
name : '湖南',
value : randomValue()
}, {
name : '安徽',
value : randomValue()
}, {
name : '山東',
value : randomValue()
}, {
name : '新疆',
value : randomValue()
}, {
name : '江蘇',
value : randomValue()
}, {
name : '浙江',
value : randomValue()
}, {
name : '江西',
value : randomValue()
}, {
name : '湖北',
value : randomValue()
}, {
name : '廣西',
value : randomValue()
}, {
name : '甘肅',
value : randomValue()
}, {
name : '山西',
value : randomValue()
}, {
name : '內蒙古',
value : randomValue()
}, {
name : '陝西',
value : randomValue()
}, {
name : '吉林',
value : randomValue()
}, {
name : '福建',
value : randomValue()
}, {
name : '貴州',
value : randomValue()
}, {
name : '廣東',
value : randomValue()
}, {
name : '青海',
value : randomValue()
}, {
name : '西藏',
value : randomValue()
}, {
name : '四川',
value : randomValue()
}, {
name : '寧夏',
value : randomValue()
}, {
name : '海南',
value : randomValue()
}, {
name : '臺灣',
value : randomValue()
}, {
name : '香港',
value : randomValue()
}, {
name : '澳門',
value : randomValue()
} ]
} ]
};
myChart.setOption(option);
myChart.on('mouseover', function(params) {
var dataIndex = params.dataIndex;
console.log(params);
});
</script>
</body>
</html>