地图地市区域,地市上打的点和星上绑定单击事件,点和星的单击事件绑定成功,但是地市区域点击事件不成功,代码也没有报错,请指教代码如下

100度 发布于 2014/05/15 11:12
阅读 169
收藏 0

<%@ 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'
        ],
       
        function(ec) {
         var myChart = ec.init(document.getElementById('mainMap'));
         var ecConfig = require('echarts/config');
         var zrEvent = require('zrender/tool/event');
            myChart.on(ecConfig.EVENT.CLICK,clickMapArea);
            myChart.on(ecConfig.EVENT.MAP_SELECTED,clickMapArea);
         initmap(myChart);
         var time = 1000 *60 ;
         setInterval(function(){
           initmap(myChart);
         }, time);
         
         window.onresize=function(){
           changeDivHeight(myChart);
           }
            changeDivHeight(myChart);
           
        }
    );

    function clickMapArea(param) {
     var cityName=param.name
       alert(cityName); 
    }
   
    //地图初始化
    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>

加载中
0
CloudArchitect
CloudArchitect
把好使的部分删除掉 不好使的贴出来看下 这样就省了好多事
返回顶部
顶部