Echarts 地图区域绑定点击事件

100度 发布于 2014/05/15 09:11
阅读 20K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:

我在地图控件每个区域,打的点和星上绑定单击事件不成功,JS 也没有报错。代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/includes/taglibs.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!--引入一个模块加载器,如esl.js或者require.js-->
    <script src="${base }/js/home/newmap/esl.js"></script>
    <script src="${base }/js/home/newmap/echarts-map.js"></script>
    <script src="${base }/js/home/newmap/echarts.js"></script>
    <script type="text/javascript" src="${base }/js/jquery.js"></script>
 <script type="text/javascript" src="${base }/js/ui/jquery-ui.min.js"></script>
 <link rel="stylesheet" type="text/css" media="screen" href="${base}/css/reset.css" />
 <link rel="stylesheet" type="text/css" media="screen" href="${base}/css/ui/layout/layout.css" />
  </head>
<body  style="overflow:hidden;">
    <!--为ECharts准备一个具备大小(宽高)的Dom-->
    <div id="mainMap"   style="height:360px;width:98%;overflow-y:hidden;overflow-x:hidden"></div>
    <script type="text/javascript">
    // 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径   
    require( 
        [
            'echarts',
            'echarts/chart/map',
            'echarts/config',
            'zrender/tool/event'
        ],
       
        function(ec) {
         var myChart = ec.init(document.getElementById('mainMap'));
         initmap(myChart);
         
         var ecConfig = require('echarts/config');
         var zrEvent = require('zrender/tool/event');
            myChart.on(ecConfig.EVENT.MAP_SELECTED, clickMapArea);
           
         var time = 1000 *60 ;
         setInterval(function(){
           initmap(myChart);
         }, time);
         
         window.onresize=function(){
           changeDivHeight(myChart);
           }
            changeDivHeight(myChart);
           
        }
    );

    function clickMapArea(param) {
       alert(1111); 
    }
   
    //地图初始化
    function initmap(myChart){
        myChart.setOption({
            tooltip : {
                trigger: 'item',
                formatter: function(params,ticket,callback) {
                   var cityName=params[1];
                   var res = "单位名称:"+cityName+"<br/>";
                   $.ajax({
                 dataType:'json',
           async:false,
                 url:'${base}/newIndex/map/getStaticData?cityName='+encodeURI(encodeURI(cityName)),
                 success: function(result){
                 //res=res+"事件总数:"+result.data.eventCount+"<br/>";
                 res=res+"告警总数:"+result.data.alertCount;
                  }
                });
                    setTimeout(function(){
                        // 仅为了模拟异步回调
                        callback(ticket, res);
                    }, 1000)
                    return res;
                }
            },
            dataRange: {
                min: 0,
                max: 2,
                splitNumber:2,
                orient :'horizontal' ,
                textStyle: {
                 color: "#99CCFF"
                },
                y:'top',
                color :['#249bf8','#FF3300'],
                text:['正常','风险']
            },
            series : [
                {
                    name: '广西省地图',
                    type: 'map',
                    mapType: '广西',
                    roam :false,
                    itemStyle:{
                        normal:{
                           label:{
                            show:true,
                            textStyle:{
                                color:'#242424',
                                fontWeight: 'bold'
                             }
                           },
                           color:'#249bf8'
                         
                         },
                        emphasis:{label:{show:true}}
                    },
                    data:(function (){
                     var res = [];
                     $.ajax({
                        dataType:'json',
                  async:false,
                        url:'${base}/newIndex/map/findIsSafety?isPoint=0',
                        success: function(result){
                          res=result;
                         }
                     });
                     return res;
                    })()
                    ,
                    markPoint:{
                        symbol:'circle',
                        symbolSize:3, 
                        itemStyle: {
                               normal: {
                                   borderColor: '#CCFFFF',
                                   borderWidth: 8,
                                   label: {
                                       show: false
                                   }
                               },
                               emphasis: {
                                   borderWidth: 8,
                                   label: {
                                       show: false
                                   }
                               }
                           },
                           data : (function (){
                            var res = [];
                         $.ajax({
                            dataType:'json',
                      async:false,
                            url:'${base}/newIndex/map/findIsSafety?isPoint=1',
                            success: function(result){
                                res=result;
                             }
                         });
                         return res;
                        })()
                       }
                       ,geoCoord: {
                                "电科院":[108.33,22.84]
                                  }
                  },
                  {
                    name: '广西省地图',
                    type: 'map',
                    mapType: '广西',
                    data:[],
                    markPoint : {
                        symbol:'star',
                        symbolSize:1,
                        itemStyle: {
                            normal: {
                                borderColor: '#CCFFFF',
                                borderWidth: 8,
                                label: {
                                    show: false
                                }
                            },
                            emphasis: {
                                borderWidth: 8,
                                label: {
                                    show: false
                                }
                            }
                        },
                        data : (function (){
                         var res = [];
                         $.ajax({
                            dataType:'json',
                      async:false,
                            url:'${base}/newIndex/map/findIsSafety?isPoint=2',
                            success: function(result){
                              res=result;
                             }
                         });
                         return res;
                        })()
                    }
                
                  ,geoCoord: {
                               "公司本部":[108.93,22.84]
                             }
                },
                {   name: '广西省地图',
                    type: 'map',
                    mapType: '广西',
                    data:[],
                    markPoint:{
                      symbol:'emptyCircle',
                      symbolSize : function(v){
                         return 5 + v/100
                       },
                       itemStyle:{
                           normal:{
                               label:{show:false}
                           },
                           emphasis: {
                           borderWidth: 8,
                           label: {
                               show: false
                           }
                       }
                       },
                       effect : {
                           show: true,
                           shadowBlur : 0
                       },
                       data :(function (){
                        var res = [];
                     $.ajax({
                        dataType:'json',
                  async:false,
                        url:'${base}/newIndex/map/findPointIsSafety?isPoint=1',
                        success: function(result){
                          res=result;
                         }
                     });
                     return res;
                    })()
                     }
                     ,geoCoord: {
                              "电科院":[108.33,22.84]
                                }
                }
                ,
                {   name: '广西省地图',
                    type: 'map',
                    mapType: '广西',
                    data:[],
                    markPoint:{
                      symbol:'star',
                      symbolSize : function(v){
                         return 6 + v/100
                       },
                       itemStyle:{
                           normal:{
                               label:{show:false}
                           },
                           emphasis: {
                               borderWidth: 10,
                               label: {
                                   show: false
                               }
                           }
                       },
                       effect : {
                           show: true,
                           shadowBlur : 0
                       },
                       data : (function (){
                        var res = [];
                     $.ajax({
                        dataType:'json',
                  async:false,
                        url:'${base}/newIndex/map/findPointIsSafety?isPoint=2',
                        success: function(result){
                          res=result;
                         }
                     });
                     return res;
                    })()
                     }
                     ,geoCoord: {
                                 "公司本部":[108.93,22.84]
                                }
                }
            ]
           
        },true);
     
    }
   
    function changeDivHeight(myChart){
      var hh=$(window).height();
      if(hh==375){
       $("#mainMap").height(360);
      }else{
       var aas=hh/375;
       $("#mainMap").height(aas*360);
      }
        myChart.resize();
     }
   </script>
</body>
</html>

以下是问题补充:

@100度:我需要点和星、 还有地图地市的区域都绑定上点击事件。现在点和星的单击绑定上了,但是地图区域事件始终绑定不上,地图区域绑定单击使用的是 myChart.on(ecConfig.EVENT.MAP_SELECTED, clickMapArea); 这行代码 (2014/05/15 10:11)
加载中
0
Kener-林峰
Kener-林峰
markPoint响应的是click事件,你绑的是地图selected事件
随风而浮沉
随风而浮沉
回复 @100度 : 我想问一下你这个问题解决了吗?因为我也遇到了这个问题,CLICK都可以用,就是MAP_SELECTED没作用
100度
100度
回复 @Kener-林峰 : 我现在就是按照我发的代码这么写的,现在地图的单击事件绑定不上。
Kener-林峰
Kener-林峰
回复 @100度 : 可以啊,两个事件不冲突,能同时响应
100度
100度
我需要点和星、 还有地图地市的区域都绑定上点击事件。现在点和星的单击绑定上了,但是地图区域事件始终绑定不上,地图区域绑定单击使用的是 myChart.on(ecConfig.EVENT.MAP_SELECTED, clickMapArea); 这行代码
0
liuweihug
liuweihug
基于html5、js的超强报表控件Echarts系列教程(3) 
http://www.suchso.com/projecteactual/baidu-echarts-use-event.html
返回顶部
顶部