echart3绘制地图

使用echarts3绘制地图，引用js以下：

<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/china.js"></script>

为echarts准备容器：

<div id="main" style="width: 600px;height: 400px;"></div>

初始化echarts:

var myEcharts = echarts.init(document.getElementById("main"));

指定地图配置项及样式：

var options = { backgroundColor: '#404a59', //背景颜色 title: { //主题 show: true, //显示主题 text: '中国地图', //主题内容 x: 'center', //设置主题水平居中 textStyle: { color: '#fff' //字体颜色 }, }, series: [{ type: 'map',//指定图表为地图 map: 'china', itemStyle: { //地图区域多边形 normal: { //普通状态的多边形样式 borderWidth: .5, //区域边框宽度 borderColor: '#fff', //区域边框颜色 areaColor: '#323c48' //区域颜色 }, emphasis: { //高亮状态的多边形样式 show: true, //高亮状态下显示省份 borderWidth: .5, borderColor: '#4b0082', areaColor: '#cccccc' } }, }], };

以上配置只显示地图及将鼠标放在地图上时显示相应区域的省份名称，若须要加配置项参考echarts官网配置项http://echarts.baidu.com/option.html 。

使用刚指定的配置项绘制地图

myEcharts.setOption(options);

地图效果以下（进入页面时地图没有显示省份，当把鼠标放在某区域时，显示相应区域省市名称）：