已甘肃为例:
需要注意的是map: ‘甘肃’,需要和你下载的省份的名称对应,否则不会显示地图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="main" style="height:800px;"></div> </body> <script type="text/javascript" src="js/echarts.min.js" ></script> <script type="text/javascript" src="js/gansu.js"></script> <script> var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', selectedMode : 'single', map: '甘肃', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} } }] }); chart.on('click', function (params) { console.log(params) var city = params.name; alert(city) }); </script> </html>
说明:
1、上面例子中gansu.js在https://github.com/apache/incubator-echarts/tree/master/map/js/province下载的,,里面有每个省份的地图,每个市的地图。
2、上面例子中是点击事件,如鼠标滑过事件等更多事件在官网:https://echarts.apache.org/zh/api.html#events