(function() {
var myChart = echarts.init(document.querySelector(".map"));
var geoCoordMap = {
'山东':[117.000923, 36.675807],
'河北':[115.48333,38.03333],
'吉林':[125.35000,43.88333],
'黑龙江':[127.63333,47.75000],
'辽宁':[123.38333,41.80000],
'内蒙古':[111.670801, 41.818311],
'新疆':[87.68333,43.76667],
'甘肃':[103.73333,36.03333],
'宁夏':[106.26667,37.46667],
'山西':[112.53333,37.86667],
'陕西':[108.95000,34.26667],
'河南':[113.65000,34.76667],
'安徽':[117.283042, 31.86119],
'江苏':[119.78333,32.05000],
'浙江':[120.20000,30.26667],
'福建':[118.30000,26.08333],
'广东':[113.23333,23.16667],
'江西':[115.90000,28.68333],
'海南':[110.35000,20.01667],
'广西':[108.320004, 22.82402],
'贵州':[106.71667,26.56667],
'湖南':[113.00000,28.21667],
'湖北':[114.298572, 30.584355],
'四川':[104.06667,30.66667],
'云南':[102.73333,25.05000],
'西藏':[91.00000,30.60000],
'青海':[96.75000,36.56667],
'天津':[117.20000,39.13333],
'上海':[121.55333,31.20000],
'重庆':[106.45000, 29.56667],
'北京': [116.41667,39.91667],
'台湾': [121.30, 25.03],
'香港': [114.10000,22.20000],
'澳门': [113.50000,22.20000],
};
var dataList=[
{name:"山东", value:42},
{name:"河北", value:13},
{name:"吉林", value:26},
{name:"黑龙江", value:52},
{name:"辽宁", value:7},
{name:"内蒙古", value:4},
{name:"新疆", value:9},
{name:"甘肃", value:9},
{name:"宁夏", value:42},
{name:"山西", value:32},
{name:"陕西", value:42},
{name:"河南", value:10},
{name:"安徽", value:42},
{name:"江苏", value:7},
{name:"浙江", value:42},
{name:"福建", value:5},
{name:"广东", value:9},
{name:"江西", value:42},
{name:"海南", value:42},
{name:"广西", value:42},
{name:"贵州", value:42},
{name:"湖南", value:42},
{name:"湖北", value:42},
{name:"四川", value:42},
{name:"云南", value:42},
{name:"西藏", value:42},
{name:"青海", value:61},
{name:"天津", value:42},
{name:"上海", value:42},
{name:"重庆", value:20},
{name:"北京", value:30},
{name:"台湾", value:0},
{name:"香港", value:0},
{name:"澳门", value:0},
];
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;
};
var series = [
{
name: "",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {brushType: "stroke"},
hoverAnimation: true,
label: {normal: {position: "right",show: false,formatter: ""}},
symbolSize: function(val) {return val[2]/2;},
itemStyle: {
normal: {color: "#288769"},
emphasis: {areaColor: "#2B91B7"}
},
data: convertData(dataList)
}
];
var option = {
tooltip: {
trigger: "item",
formatter: function (data) {
return "省份:" + data.name + "</br>样品数量:" + data.value[2];
}
},
geo: {
map: "china",
label: {
emphasis: {
show: true,
color: "#fff"
}
},
// 把中国地图放大了1.25倍
zoom: 1.15,
roam: true,
itemStyle: {
normal: {
// 地图省份的背景颜色
areaColor: "rgba(52,144,186,0.3)",
borderColor: "#195BB9",
borderWidth: 1
},
emphasis: {
areaColor: "rgba(40, 41, 160,0.6)"
}
}
},
series: series,
visualMap: { // 视觉映射组件
type: 'piecewise',
min: 0,
max: 100,
left:15,
bottom:20,
calculable: true,
inRange: {
color: ["#55ffff", "#ffff00", "#00ff00","#9fe6b8","#F8B448"]
},
textStyle:{color:"#FFF"}
}
};
myChart.setOption(option);
// 监听浏览器缩放,图表对象调用缩放resize函数
window.addEventListener("resize", function() {
myChart.resize();
});
})();