一、
網址： http://echarts.baidu.com/download.html
點擊： 完整
下載文件： echarts.min.js
網址： http://echarts.baidu.com/download-map.html
點擊： 中國地圖 - JS
下載文件： china.js
二、代碼示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=EDGE"> <title>ECharts</title> <link rel="stylesheet" type="text/css" href="css/main.css"/> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/echarts.min.js"></script> <script src="js/china.js"></script> <style>#china-map {width:1000px; height: 1000px;margin: auto;}</style> </head> <body> <div id="china-map"></div> <script> var myChart = echarts.init(document.getElementById('china-map')); var option = { tooltip: { // show: false //不顯示提示標簽 formatter: '{b}', //提示標簽格式 backgroundColor:"#ff7f50",//提示標簽背景顏色 textStyle:{color:"#fff"} //提示標簽字體顏色 }, series: [{ type: 'map', mapType: 'china', label: { normal: { show: true,//顯示省份標簽 textStyle:{color:"#c71585"}//省份標簽字體顏色 }, emphasis: {//對應的鼠標懸浮效果 show: true, textStyle:{color:"#800080"} } }, itemStyle: { normal: { borderWidth: .5,//區域邊框寬度 borderColor: '#009fe8',//區域邊框顏色 areaColor:"#ffefd5",//區域顏色 }, emphasis: { borderWidth: .5, borderColor: '#4b0082', areaColor:"#ffdead", } }, data:[ {name:'福建', selected:true}//福建為選中狀態 ] }], }; myChart.setOption(option); myChart.on('mouseover', function (params) { var dataIndex = params.dataIndex; console.log(params); }); </script> </body> </html>
三、效果圖
四、修改省份標簽位置：
打開china.js文件，修改"properties":{"cp":[X坐標,Y坐標],...}