echarts---中国地图
html文件
<div id="chinaMap">引入echarts-map-china.js和echarts-auto-toopltip.js文件
(function(){
chinaMapAnalysis();
})();
var timers = setInterval("chinaMapAnalysis()",2000*34);
function chinaMapAnalysis(){
var myChart = echarts.init(document.getElementById('chinaMap'));
var mapName = 'china'
var data = [
{
"name": "广东",
"value": "32759689",
},
{
"name": "北京",
"value": "21488391",
},
{
"name": "河南",
"value": "17561573",
},
{
"name": "四川",
"value": "15594825",
},
{
"name": "山东",
"value": "14419506"
},
{
"name": "河北",
"value": "13909330"
},
{
"name": "江苏",
"value": "12921244"
},
{
"name": "上海",
"value": "12437994"
},
{
"name": "浙江",
"value": "11474216"
},
{
"name": "湖南",
"value": "10816725"
},
{
"name": "广西",
"value": "9700183"
},
{
"name": "云南",
"value": "9515082"
},
{
"name": "湖北",
"value": "8954643"
},
{
"name": "陕西",
"value": "7655068"
},
{
"name": "贵州",
"value": "7616656"
},
{
"name": "江西",
"value": "7378329"
},
{
"name": "安徽",
"value": "6405058"
},
{
"name": "山西",
"value": "6312334"
},
{
"name": "辽宁",
"value": "6232378"
},
{
"name": "福建",
"value": "6197020"
},
{
"name": "重庆",
"value": "5697082"
},
{
"name": "黑龙江",
"value": "5658513"
},
{
"name": "内蒙古",
"value": "4712741"
},
{
"name": "甘肃",
"value": "4580060"
},
{
"name": "新疆",
"value": "4525321",
},
{
"name": "吉林",
"value": "4266389"
},
{
"name": "天津",
"value": "2022157"
},
{
"name": "海南",
"value": "1936011"
},
{
"name": "宁夏",
"value": "1467879"
},
{
"name": "青海",
"value": "1443514"
},
{
"name": "西藏",
"value": "688144"
},
{
"name": "台湾",
"value": "89617"
},
{
"name": "香港",
"value": "62241"
},
{
"name": "澳门",
"value": "16193"
}
];
var geoCoordMap = {};
var toolTipData = [
{name:"北京",value:[{name:"IP用户数","value":"21488391"},{name:"手机号码用户数",value:"5219938"}]},
{name:"天津",value:[{name:"IP用户数",value:"2022157"},{name:"手机号码用户数",value:"1182236"}]},
{name:"河北",value:[{name:"IP用户数",value:"13909330"},{name:"手机号码用户数",value:"7665212"}]},
{name:"山西",value:[{name:"IP用户数",value: "6405058"},{name:"手机号码用户数",value: "3474896"}]},
{name:"内蒙古",value:[{name:"IP用户数",value:"4712741"},{name:"手机号码用户数",value:"2757152"}]},
{name:"辽宁",value:[{name:"IP用户数",value: "6405058"},{name:"手机号码用户数",value: "3804074"}]},
{name:"吉林",value:[{name:"IP用户数",value:"4266389"},{name:"手机号码用户数",value: "2437681"}]},
{name:"黑龙江",value:[{name:"IP用户数",value:"5658513"},{name:"手机号码用户数",value:"3153689"}]},
{name:"上海",value:[{name:"IP用户数",value:"12437994"},{name:"手机号码用户数",value:"2012482"}]},
{name:"江苏",value:[{name:"IP用户数",value:"12921244"},{name:"手机号码用户数",value:"7251352"}]},
{name:"浙江",value:[{name:"IP用户数",value:"11474216"},{name:"手机号码用户数",value:"6117799"}]},
{name:"安徽",value:[{name:"IP用户数",value: "6405058"},{name:"手机号码用户数",value: "5850896"}]},
{name:"福建",value:[{name:"IP用户数",value:"6197020"},{name:"手机号码用户数",value:"3156429"}]},
{name:"江西",value:[{name:"IP用户数",value:"7378329"},{name:"手机号码用户数",value:"4193087"}]},
{name:"山东",value:[{name:"IP用户数",value: "14419506"},{name:"手机号码用户数",value:"8421346"}]},
{name:"河南",value:[{name:"IP用户数",value:"17561573"},{name:"手机号码用户数",value:"10452286"}]},
{name:"湖北",value:[{name:"IP用户数",value:"8954643"},{name:"手机号码用户数",value:"4804720"}]},
{name:"湖南",value:[{name:"IP用户数",value:"10816725"},{name:"手机号码用户数",value:"6255680"}]},
{name:"重庆",value:[{name:"IP用户数",value:"5697082"},{name:"手机号码用户数",value:"3184887"}]},
{name:"四川",value:[{name:"IP用户数",value:"15594825"},{name:"手机号码用户数",value:"10677089"}]},
{name:"贵州",value:[{name:"IP用户数",value:"7616656"},{name:"手机号码用户数",value:"5641874"}]},
{name:"云南",value:[{name:"IP用户数",value:"9515082"},{name:"手机号码用户数",value:"6544837"}]},
{name:"西藏",value:[{name:"IP用户数",value:"688144"},{name:"手机号码用户数",value: "618021"}]},
{name:"陕西",value:[{name:"IP用户数",value:"7655068"},{name:"手机号码用户数",value:"4423516"}]},
{name:"甘肃",value:[{name:"IP用户数",value:"4580060"},{name:"手机号码用户数",value:"3047801"}]},
{name:"青海",value:[{name:"IP用户数",value:"1443514"},{name:"手机号码用户数",value:"780602"}]},
{name:"宁夏",value:[{name:"IP用户数",value: "1467879"},{name:"手机号码用户数",value:"933411"}]},
{name:"新疆",value:[{name:"IP用户数",value:"4525321"},{name:"手机号码用户数",value:"2975154"}]},
{name:"广东",value:[{name:"IP用户数",value: "32759689"},{name:"手机号码用户数",value:"14322757"}]},
{name:"广西",value:[{name:"IP用户数",value:"9700183"},{name:"手机号码用户数",value:"5049149"}]},
{name:"海南",value:[{name:"IP用户数",value: "1936011"},{name:"手机号码用户数",value:"1162584"}]},
{name:"台湾",value:[{name:"IP用户数",value: "89617"}]},
{name:"澳门",value:[{name:"IP用户数",value:"16193"}]},
{name:"香港",value:[{name:"IP用户数",value: "62241"}]}
];
/*获取地图数据*/
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;
};
option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
if (typeof(params.value)[2] == "undefined") {
var toolTiphtml = ''
for(var i = 0;i<toolTipData.length;i++){
if(params.name==toolTipData[i].name){
toolTiphtml += toolTipData[i].name+':<br>'
for(var j = 0;j<toolTipData[i].value.length;j++){
toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
}
}
}
return toolTiphtml;
} else {
var toolTiphtml = ''
for(var i = 0;i<toolTipData.length;i++){
if(params.name==toolTipData[i].name){
toolTiphtml += toolTipData[i].name+':<br>'
for(var j = 0;j<toolTipData[i].value.length;j++){
toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
}
}
}
return toolTiphtml;
}
}
},
visualMap: { //地图左侧配置
show : true,
x: 'left',
y: 'bottom',
color: ['#e12425', '#e19106', '#6acf00','#a3e10a', '#CCC'],
splitList: [
{start: 12000000},
{start: 9000000, end: 12000000},{start: 6000000, end: 9000000},
{start: 3000000, end: 6000000},{start: 0, end: 3000000},
],
textStyle:{
color:"#999",
fontWeight:"bold",
fontSize:14
}
},
series: [
{
type: 'map',
map: mapName,
zoom:1.2,
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: 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: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow'
}
},
zlevel: 1
},
]
};
myChart.setOption(option);
tools.loopShowTooltip(myChart,option,{loopSeries:true});//tooptip自动轮播
}