實現效果如下
地圖
<!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實例
var myChart = echarts.init(document.getElementById('main'));
//使用制定的配置項和數據顯示圖表
myChart.setOption(
{
//提示框組件
tooltip: {
show: false,//是否顯示組件
trigger: 'item',//數據觸發類型 item：數據圖餅圖觸發 axis:坐標軸觸發
formatter: '{b}'//地圖 {b}（區域名稱）
},
series: [{
name: '中國',
type: 'map',
mapType: 'china',
//selectedMode: 'multiple',
itemStyle: {//有2個狀態 normal 是圖形在默認狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式
normal: {
label: {
show: true,
textStyle: {//標簽的文本樣式
fontSize: 18,
color: '#000'
}
},
borderColor: '#cdcdca',//邊框顏色
borderWidth: 0.5,//邊框線寬
areaStyle: {//區域樣式
color: '#000'
}
},
emphasis: {
borderWidth: 0.5,
borderColor: '#cdcdca',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認透明
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: {//高亮狀態下的多邊形和標簽樣式
borderWidth: 1,
borderColor: '#3db77f',
areaColor: '#fff',
label: {
shadowColor: '#000', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
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', //默認透明
shadowBlur: 10,
show: false,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
}, {
name: '南海諸島',
itemStyle: {
normal: {
areaColor: "#e4ebe8",
},
emphasis: {
// borderWidth: 1,
// borderColor: '#e4ebe8',
areaColor: '#e4ebe8',
label: {
shadowColor: '#000', //默認透明
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', //默認透明
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，可能會導致省份名字不居中或者重疊，必須修改”properties”下的”cp”屬性存儲的是經緯度坐標
echarts配置文檔：http://echarts.baidu.com/echarts2/doc/option.html#title~
