Echarts 地图添加点击事件
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:400px"></div> <div id="wrong-message"></div> <!-- ECharts单文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> <script type="text/javascript"> // 基于准备好的dom，初始化echarts图表 var myChart = echarts.init(document.getElementById(\'main\')); var option = { title : { text: \'iphone销量\', subtext: \'纯属虚构\', x:\'center\' }, tooltip : { trigger: \'item\' }, legend: { orient: \'vertical\', x:\'left\', data:[\'iphone3\',\'iphone4\',\'iphone5\'] }, dataRange: { min: 0, max: 2500, x: \'left\', y: \'bottom\', text:[\'高\',\'低\'], // 文本，默认为数值文本 calculable : true }, toolbox: { show: true, orient : \'vertical\', x: \'right\', y: \'center\', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, roamController: { show: true, x: \'right\', mapTypeControl: { \'china\': true } }, series : [ { name: \'iphone3\', type: \'map\', mapType: \'china\', selectedMode: \'single\', //添加点击事件 此处必须设置 roam: false, itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: \'北京\',value: Math.round(Math.random()*1000)}, {name: \'天津\',value: Math.round(Math.random()*1000)}, {name: \'上海\',value: Math.round(Math.random()*1000)}, {name: \'重庆\',value: Math.round(Math.random()*1000)}, {name: \'河北\',value: Math.round(Math.random()*1000)}, {name: \'河南\',value: Math.round(Math.random()*1000)}, {name: \'云南\',value: Math.round(Math.random()*1000)}, {name: \'辽宁\',value: Math.round(Math.random()*1000)}, {name: \'黑龙江\',value: Math.round(Math.random()*1000)}, {name: \'湖南\',value: Math.round(Math.random()*1000)}, {name: \'安徽\',value: Math.round(Math.random()*1000)}, {name: \'山东\',value: Math.round(Math.random()*1000)}, {name: \'新疆\',value: Math.round(Math.random()*1000)}, {name: \'江苏\',value: Math.round(Math.random()*1000)}, {name: \'浙江\',value: Math.round(Math.random()*1000)}, {name: \'江西\',value: Math.round(Math.random()*1000)}, {name: \'湖北\',value: Math.round(Math.random()*1000)}, {name: \'广西\',value: Math.round(Math.random()*1000)}, {name: \'甘肃\',value: Math.round(Math.random()*1000)}, {name: \'山西\',value: Math.round(Math.random()*1000)}, {name: \'内蒙古\',value: Math.round(Math.random()*1000)}, {name: \'陕西\',value: Math.round(Math.random()*1000)}, {name: \'吉林\',value: Math.round(Math.random()*1000)}, {name: \'福建\',value: Math.round(Math.random()*1000)}, {name: \'贵州\',value: Math.round(Math.random()*1000)}, {name: \'广东\',value: Math.round(Math.random()*1000)}, {name: \'青海\',value: Math.round(Math.random()*1000)}, {name: \'西藏\',value: Math.round(Math.random()*1000)}, {name: \'四川\',value: Math.round(Math.random()*1000)}, {name: \'宁夏\',value: Math.round(Math.random()*1000)}, {name: \'海南\',value: Math.round(Math.random()*1000)}, {name: \'台湾\',value: Math.round(Math.random()*1000)}, {name: \'香港\',value: Math.round(Math.random()*1000)}, {name: \'澳门\',value: Math.round(Math.random()*1000)} ] }, { name: \'iphone4\', type: \'map\', mapType: \'china\', selectedMode: \'single\', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: \'北京\',value: Math.round(Math.random()*1000)}, {name: \'天津\',value: Math.round(Math.random()*1000)}, {name: \'上海\',value: Math.round(Math.random()*1000)}, {name: \'重庆\',value: Math.round(Math.random()*1000)}, {name: \'河北\',value: Math.round(Math.random()*1000)}, {name: \'安徽\',value: Math.round(Math.random()*1000)}, {name: \'新疆\',value: Math.round(Math.random()*1000)}, {name: \'浙江\',value: Math.round(Math.random()*1000)}, {name: \'江西\',value: Math.round(Math.random()*1000)}, {name: \'山西\',value: Math.round(Math.random()*1000)}, {name: \'内蒙古\',value: Math.round(Math.random()*1000)}, {name: \'吉林\',value: Math.round(Math.random()*1000)}, {name: \'福建\',value: Math.round(Math.random()*1000)}, {name: \'广东\',value: Math.round(Math.random()*1000)}, {name: \'西藏\',value: Math.round(Math.random()*1000)}, {name: \'四川\',value: Math.round(Math.random()*1000)}, {name: \'宁夏\',value: Math.round(Math.random()*1000)}, {name: \'香港\',value: Math.round(Math.random()*1000)}, {name: \'澳门\',value: Math.round(Math.random()*1000)} ] }, { name: \'iphone5\', type: \'map\', mapType: \'china\', selectedMode: \'single\', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: \'北京\',value: Math.round(Math.random()*1000)}, {name: \'天津\',value: Math.round(Math.random()*1000)}, {name: \'上海\',value: Math.round(Math.random()*1000)}, {name: \'广东\',value: Math.round(Math.random()*1000)}, {name: \'台湾\',value: Math.round(Math.random()*1000)}, {name: \'香港\',value: Math.round(Math.random()*1000)}, {name: \'澳门\',value: Math.round(Math.random()*1000)} ] } ] }; function eConsole(param) { console.log(param); } myChart.on(echarts.config.EVENT.MAP_SELECTED, eConsole); myChart.setOption(option); </script> </body>
版权声明：本文为michael23原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。