實(shí)現(xiàn)效果如下
地圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
</head>
<body>
<div id="main" style="width: 1200px;height: 700px;margin: 0 auto;"></div>
<script>
//初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
//使用制定的配置項(xiàng)和數(shù)據(jù)顯示圖表
myChart.setOption(
{
//提示框組件
tooltip: {
show: false,//是否顯示組件
trigger: 'item',//數(shù)據(jù)觸發(fā)類型 item：數(shù)據(jù)圖餅圖觸發(fā) axis:坐標(biāo)軸觸發(fā)
formatter: ''//地圖 铝宵（區(qū)域名稱）
},
series: [{
name: '中國',
type: 'map',
mapType: 'china',
//selectedMode: 'multiple',
itemStyle: {//有2個(gè)狀態(tài) normal 是圖形在默認(rèn)狀態(tài)下的樣式伺帘；emphasis 是圖形在高亮狀態(tài)下的樣式
normal: {
label: {
show: true,
textStyle: {//標(biāo)簽的文本樣式
fontSize: 18,
color: '#000'
}
},
borderColor: '#cdcdca',//邊框顏色
borderWidth: 0.5,//邊框線寬
areaStyle: {//區(qū)域樣式
color: '#000'
}
},
emphasis: {
borderWidth: 0.5,
borderColor: '#cdcdca',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
}
},
data: [{
name: '黑龍江',
itemStyle: {
normal: {
areaColor: "#f2e9e4",
// borderWidth: 2
},
emphasis: {//高亮狀態(tài)下的多邊形和標(biāo)簽樣式
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '青海',
itemStyle: {
normal: {
areaColor: "#f2e9e4",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#f2e9e4',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '陜西',
itemStyle: {
normal: {
areaColor: "#f2e9e4",
// borderWidth: 2
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '廣東',
itemStyle: {
normal: {
areaColor: "#f2e9e4",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#f2e9e4',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '廣西',
itemStyle: {
normal: {
areaColor: "#daeadd",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#daeadd',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '重慶',
itemStyle: {
normal: {
areaColor: "#daeadd",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#daeadd',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '寧夏',
itemStyle: {
normal: {
areaColor: "#f2e9e4",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#f2e9e4',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '云南',
itemStyle: {
normal: {
areaColor: "#f2e9e4",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#f2e9e4',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '河南',
itemStyle: {
normal: {
areaColor: "#f5e6e8",
// borderWidth: 2
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '江西',
itemStyle: {
normal: {
areaColor: "#f4e8e8",
//borderWidth: 2
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '吉林',
itemStyle: {
normal: {
areaColor: "#f6f7e9",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#f6f7e9',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '海南',
itemStyle: {
normal: {
areaColor: "#f2e8e4",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#f2e8e4',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '臺灣',
itemStyle: {
normal: {
areaColor: "#f2e8e4",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#f2e8e4',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '河北',
itemStyle: {
normal: {
areaColor: "#f6f7e9",
},
emphasis: {
areaColor: '#fff',
borderWidth: 1,
borderColor: '#3db77f',
label: {
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '甘肅',
itemStyle: {
normal: {
areaColor: "#f6f7e9",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#f6f7e9',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '湖北',
itemStyle: {
normal: {
areaColor: "#f6f7e9",
// borderWidth: 2
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '貴州',
itemStyle: {
normal: {
areaColor: "#f6f7e9",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#f6f7e9',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '西藏',
itemStyle: {
normal: {
areaColor: "#f6f7e9",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#f6f7e9',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '內(nèi)蒙古',
itemStyle: {
normal: {
areaColor: "#dce6ea",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#dce6ea',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '新疆',
itemStyle: {
normal: {
areaColor: "#dce6ea",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#dce6ea',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '北京',
itemStyle: {
normal: {
areaColor: "#dce6ea",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#dce6ea',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '天津',
itemStyle: {
normal: {
areaColor: "#dce6ea",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#dce6ea',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '上海',
itemStyle: {
normal: {
areaColor: "#dce6ea",
// borderWidth: 2
},
emphasis: {
// borderWidth: 1,
// borderColor: '#3db77f',
areaColor: '#dce6ea',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
}
}, {
name: '湖南',
itemStyle: {
normal: {
areaColor: "#dce6ea",
// borderWidth: 2
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '福建',
itemStyle: {
normal: {
areaColor: "#dce6ea",
// borderWidth: 2
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '江蘇',
itemStyle: {
normal: {
areaColor: "#e4ebe8",
// borderWidth: 2
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '山東',
itemStyle: {
normal: {
areaColor: "#e4ebe8",
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '遼寧',
itemStyle: {
normal: {
areaColor: "#e4ebe8",
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '山西',
itemStyle: {
normal: {
areaColor: "#e4ebe8",
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '浙江',
itemStyle: {
normal: {
areaColor: "#e4ebe8",
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
}
}, {
name: '四川',
itemStyle: {
normal: {
areaColor: "#e4ebe8",
},
emphasis: {
// borderWidth: 1,
// borderColor: '#e4ebe8',
areaColor: '#e4ebe8',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
}, {
name: '南海諸島',
itemStyle: {
normal: {
areaColor: "#e4ebe8",
},
emphasis: {
// borderWidth: 1,
// borderColor: '#e4ebe8',
areaColor: '#e4ebe8',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
}, {
name: '安徽',
itemStyle: {
normal: {
areaColor: "#f6eae4",
// borderWidth: 2
},
emphasis: {
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認(rèn)透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
}
}
}],
markPoint: {
show: true,
symbol: 'circle',
symbolSize: 10,
}
}]
}
);
myChart.on('click', function(params) {
var city = params.name;
console.log(city)
// for(var i in map_citys){
// if(map_citys[i]==city+'省'){
// window.open(ROOT +'/hospital/?province='+ i);
// }
// }
});
</script>
</body>
</html>
- 下載的china.js，可能會導(dǎo)致省份名字不居中或者重疊，必須修改”properties”下的”cp”屬性存儲的是經(jīng)緯度坐標(biāo)
echarts配置文檔：http://echarts.baidu.com/echarts2/doc/option.html#title~
