当前位置： 文江博客话题详情

dataRange的formatter方法没有生效

发布于 2021-11-26 00:39:27 字数 25344 浏览 790 评论 0

@Kener-林峰 你好，想跟你请教个问题：对dataRange的值域范围用文字说明替代数字说明，使用的是dataRange的formatter，但是在页面没有生效。代码如下：

<%@ 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 src="${base }/js/home/newmap/codemirror.js"></script>
    <script src="${base }/js/home/newmap/javascript.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" onclick="test()"    style="height:360px;width:98%;overflow-y:hidden;overflow-x:hidden;z-index:1000""></div>
    <div id="bottom" style="position:fixed;bottom:0px;width:100%;height:20%;float:left">
     <div id="bottom_left" style="float:left;width:30%;height:100%"  >
      <div id="公司本部" class="left_block" style="float:right;height:30px;width:60px;background:yellow;" onmouseover="showFloatDiv(event,'公司本部')" onmouseout="hideFloatDiv()">
       <div style="line-height:20px;margin-top:30px;text-align:center;">公司本部</div>
      </div>
     </div>
     <div id="bottom_right" style="float:right;width:30%;height:100%" >
      <div id="电科院" class="right_block" style="float:left;height:30px;width:60px;background:green;" onmouseover="showFloatDiv(event,'电科院')" onmouseout="hideFloatDiv()">
       <div style="line-height:20px;margin-top:30px;text-align:center;">电科院</div>
      </div>
     </div>
    </div>
    <div id="floatDiv" style="position:fixed;width:100px;height:200px;display:none;z-index:1000">1111</div>
    <script type="text/javascript">
    // 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径   
    var myChart;
    require( 
        [
            'echarts',
            'echarts/chart/map'
        ],
       
        function(ec) {
         myChart = ec.init(document.getElementById('mainMap'));
         var ecConfig = require('echarts/config');
         var zrEvent = require('zrender/tool/event');
            myChart.on(ecConfig.EVENT.CLICK,viewAlertDetailsbyFlag);
            //myChart.on(ecConfig.EVENT.MAP_SELECTED,viewAlertDetailsbymapSelect);
         initmap(myChart);
         initBlockColor();
         var time = 1000 *60 ;
         setInterval(function(){
           initmap(myChart);
          
           initBlockColor();
          
         }, time);
         
         window.onresize=function(){
           changeDivHeight(myChart);
           }
            changeDivHeight(myChart);
           
        }
    );
   
    function test(){
     
     initmap(myChart);
    }
   
   
    //地图初始化
    function initmap(myChart){
     var cur = 0;
     dataRangeStyle = [
                       {
                        min: 0,
                           max: 5,
                           formatter : function(v) {
                               if (v >= 4) {return '高'}
                               else if (v >=3 && v<4 ) {return  '中高'}
                               else if (v >=2 && v<3 ) {return  '中'}
                               else if (v >=1 && v<2 ) {return '中低'}
                               else if (v <1 ) {return ' (低)'};
                           }
                       }
                       ]
        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.alert_level_5+"<br/>";
                 res=res+"中高级告警:"+result.data.alert_level_4+"<br/>";
                 res=res+"中级告警:"+result.data.alert_level_3+"<br/>";
                 res=res+"中低级告警:"+result.data.alert_level_2+"<br/>";
                 res=res+"低级告警:"+result.data.alert_level_1+"<br/>";
                 res=res+"高风险漏洞:"+result.data.high_vulm+"<br/>";
                 res=res+"中高风险漏洞:"+result.data.centerHigh_vulm+"<br/>";
                 res=res+"中风险漏洞:"+result.data.center_vulm+"<br/>";
                  }
                });
                    setTimeout(function(){
                        // 仅为了模拟异步回调
                        callback(ticket, res);
                    }, 1000)
                    return res;
                }
            },
            dataRange: dataRangeStyle[cur],
            series : [
                {
                    name: '广西省地图',
                    type: 'map',
                    mapType: '广西',
                    roam :false,
                    selectedMode:'single',
                    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;
                    })()
                   
                      
                  }
        
            ]
           
        },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();
     }
   
    //告警追溯电和星的点击事件
   function viewAlertDetailsbyFlag(param){
     var cityName=param.name
     $.ajax({
      dataType:'json',
     async:false,
      url:'${base}/newIndex/map/getStaticData?cityName='+encodeURI(encodeURI(cityName)),
      success: function(result){
      if(result.data.alertCount>0){
      var url = "${base}/newIndex/map/Alertdetails?cityName="+encodeURI(encodeURI(cityName)) ;
      var dialog = top.CommonDialog.create({
       top : 20,   
       width:'80%',
       height:'80%',
       url: url,
       title: '告警追溯'
      });
      }
       }
       });
  
 }
    //区域块初始化
    function initBlockColor(){
     ajaxForCity("${base}/newIndex/map/findIsSafetyByCityName","电科院",changeBlockColor);
     ajaxForCity("${base}/newIndex/map/findIsSafetyByCityName","公司本部",changeBlockColor)
    }
    function ajaxForCity(url,cityName,callback){
     $.ajax({
        dataType:'json',
     async:false,
        url:url+'?cityName='+encodeURI(encodeURI(cityName)),
        success: function(result){
         callback(result,cityName);
        }
     
       });
    }
    function changeBlockColor(result,cityName){
     var rgbValue="#FFF";
     switch(result.value+""){
      case "1":
       rgbValue="#FF3300";
       break;
      case "2":
       rgbValue="#FFCC00";
       break;
      case "3":
       rgbValue="#FFFF00";
       break;
      case "4":
       rgbValue="#009900";
       break;
      case "5":
       rgbValue="#249bf8";
       break;
      case "0":
       rgbValue="#CCC";
       break;
     }
     $("#"+cityName).css("background",rgbValue);
     
    }
   
    function showFloatDiv(e,cityName){
     
      var x=e.pageX,y=e.pageY;
            $('#floatDiv').css('left',x+10);
            $('#floatDiv').css('top',y);
            $.ajax({
            dataType:'json',
           async:true,
             url:'${base}/newIndex/map/getStaticData?cityName='+encodeURI(encodeURI(cityName)),
            success: function(result){
             var res=cityName+"</br>";
             if(result!=null){
                 res=res+"高级告警:"+result.data.alert_level_5+"<br/>";
                 res=res+"中高级告警:"+result.data.alert_level_4+"<br/>";
                 res=res+"中级告警:"+result.data.alert_level_3+"<br/>";
                 res=res+"中低级告警:"+result.data.alert_level_2+"<br/>";
                 res=res+"低级告警:"+result.data.alert_level_1+"<br/>";
                 res=res+"高风险漏洞:"+result.data.high_vulm+"<br/>";
                 res=res+"中高风险漏洞:"+result.data.centerHigh_vulm+"<br/>";
                 res=res+"中风险漏洞:"+result.data.center_vulm+"<br/>";
             }else{
              res+="暂无信息";
             }
                $('#floatDiv').html(res);
                $('#floatDiv').show();
                  }
            });
          
     
    }
    function hideFloatDiv(){
      $('#floatDiv').hide();
    }
   </script>
</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

爱你是孤单的心事

暂无简介

0 文章
0 评论
430 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文