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);

地圖效果以下（進入頁面時地圖沒有顯示省份，當把鼠標放在某區域時，顯示相應區域省市名稱）：