<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="hunan.js"></script>
<script type="text/javascript" src="china-main-city-map.js" charset="utf-8"></script>
</head>
<body>
<div id= "main" style="width:1300px;height:800px;"></div>
<script type="text/javascript">
$(function(){
//使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象
var mapChart = echarts.init(document.getElementById('main'));
var geoCoordMap = {
'长沙市':[112.98,28.19],
'邵阳市':[111.20,27.10],
'娄底市':[111.50,27.73],
'株洲市':[113.15,27.43],
'湘潭市':[112.55,27.82],
'衡阳市':[112.60,26.90],
'岳阳市':[113.13,28.99],
'常德市':[111.69,29.04],
'张家界市':[110.47,29.32],
'益阳市':[112.00,28.57],
'郴州市':[113.03,25.79],
'永州市':[111.60,26.13],
'怀化市':[109.97,27.55],
'湘西土家族苗族自治州':[109.73,28.52],
}
var data =[
{name: '长沙市', value: 107},
{name: '邵阳市', value: 105},
{name: '娄底市', value: 102},
{name: '株洲市', value: 72},
{name: '湘潭市', value: 89},
{name: '衡阳市', value: 117},
{name: '岳阳市', value: 110},
{name: '常德市', value: 139},
{name: '张家界市', value: 107},
{name: '益阳市', value: 147},
{name: '郴州市', value: 97},
{name: '永州市', value: 78},
{name: '怀化市', value: 105},
{name: '湘西土家族苗族自治州', value: 78},
]
var max = 480, min = 9; // todo
var maxSize4Pin = 100, minSize4Pin = 20;
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)
});
}
}
return res;
};
// mapChart的配置
var option = {
title:{
text: '湖南省地图',
left:'center',
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
position: function (pos, params, dom, rect, size) {
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
var compare=pos[0] < size.viewSize[0] / 2;
if(compare){
return [pos[0]-100,pos[1]];
}else{
return [pos[0]+60,pos[1]];
}
},
formatter: function (params) {
if(typeof(params.value)[2] == "undefined"){
return params.name + ' : ' + params.value;
}else{
return params.name + ' : ' + params.value[2];
}
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['credit_pm2.5'],
textStyle: {
color: '#fff'
}
},
geo: {
show: true,
map: '湖南',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series:[
{
name: 'credit_pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: '湖南',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var b = minSize4Pin - a*min;
b = maxSize4Pin - a*max;
return a*val[2]+b;
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: '#F62157', //标志颜色
}
},
zlevel: 6,
data: convertData(data),
},{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
},
]
};
//设置图表的配置项
mapChart.setOption(option);
})
</script>
</body>
</html>
