首页 > 代码库 > 使用echarts简单制作中国地图
使用echarts简单制作中国地图
网站需要一张中国地图，并且鼠标经过某个省份，该省份的省份名字显示，而且该省份的地区会变色显示。
第一种方法：
将每个省份的图片定位（先隐藏），拼合成一张中国地图，然后再定位省份名称，鼠标经过省份名字，添加hover事件，将对应图片显示。
第二种方法：
使用图形插件echarts，轻松制作。
http://echarts.baidu.com/doc/example.html在echarts网站上下载文件包
echarts使用方法查看页面
http://echarts.baidu.com/doc/doc.html#%E5%BC%95%E5%85%A5ECharts3
可以在网站上调整好需要的样式再放到本地看效果
自己试验的demo如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>echarts图形插件使用</title>
</head>
<body>
<div id="main" style="height:800px;"></div>
<script type="text/javascript" src=http://www.mamicode.com/"js/echarts-all.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById(‘main‘));
var option = {
series: [
{
name: ‘Map‘,
type: ‘map‘,
mapLocation: {
x: ‘left‘,
y: ‘top‘,
height: 500
},
selectedMode: ‘multiple‘,
itemStyle: {
normal: {
borderWidth: 2,
borderColor: ‘lightgreen‘,
color: ‘orange‘,
label: {
show: false
}
},
emphasis: { // 也是选中样式
borderWidth: 2,
borderColor: ‘#fff‘,
color: ‘#32cd32‘,
label: {
show: true,
textStyle: {
color: ‘#fff‘
}
}
}
},
data: [
{
name: ‘广东‘,
value: Math.round(Math.random() * 1000),
itemStyle: {
normal: {
color: ‘#32cd32‘,
label: {
show: true,
textStyle: {
color: ‘#fff‘,
fontSize: 15
}
}
},
emphasis: { // 也是选中样式
borderWidth: 5,
borderColor: ‘yellow‘,
color: ‘#cd5c5c‘,
label: {
show: false,
textStyle: {
color: ‘blue‘
}
}
}
}
}
],
markPoint: {
itemStyle: {
normal: {
color: ‘skyblue‘
}
},
data: [
{
name: ‘天津‘,
value: 350
},
{
name: ‘上海‘,
value: 103
},
{
name: ‘echarts‘,
symbol: ‘image://../asset/img/echarts-logo.png‘,
symbolSize: 21,
x: 300,
y: 100
}
]
},
geoCoord: {
‘上海‘: [121.4648, 31.2891],
‘天津‘: [117.4219, 39.4189]
}
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
效果图如下：
使用echarts简单制作中国地图