码迷,mamicode.com
首页 > 其他好文 > 详细

map code

时间:2018-06-21 11:52:26      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:city   tool   date   none   url   开始   col   tcl   mst   

$(document).ready(function() {
        //插件初始化
        $(":checkbox").labelauty({
          checked_label: "",
          unchecked_label: "",
        });
        $(":radio").labelauty();
        //联动下拉
        $("#city_1").citySelect({
          url:{"citylist":[
              {"p":"新老客户","c":[{"n":"不限"},{"n":"新客户"},{"n":"老客户"}]},
              {"p":"级别","c":[{"n":"LV-0"},{"n":"LV-1"},{"n":"LV-2"},{"n":"LV-3"},{"n":"LV-4"}]}
            ]},
          prov:"新老客户",
          city:"不限"
        });
        $("#city_2").citySelect({
        url:{"citylist":[
            {"p":"全国省份排名","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]},
            {"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]},
            {"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]},
          ]},
        prov:"全国省份排名",
        city:"",
        dist:"",
        nodata:"none"
      });
        
          //调用日期
          /*var start = {
            format: ‘YYYY-MM-DD‘,
            //minDate: ‘2014-06-16 23:59:59‘, //设定最小日期为当前日期
            festival:true,
            //isinitVal:true,
            maxDate: $.nowDate(0), //最大日期
            choosefun: function(elem,datas){
                end.minDate = datas; //开始日选好后,重置结束日的最小日期
            }
        };
        var end = {
            format: ‘YYYY-MM-DD‘,
            //minDate: $.nowDate(0), //设定最小日期为当前日期
            festival:true,
            //isinitVal:true,
            maxDate: ‘2099-06-16 23:59:59‘, //最大日期
            choosefun: function(elem,datas){
                start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
            }
        };
        $("#inpstart").jeDate(start);
        $("#inpend").jeDate(end);*/
        
          //初始化切换
        $(".animsition").animsition({
        
          inClass               :   ‘fade-in-right‘,
          outClass              :   ‘fade-out‘,
          inDuration            :    1500,
          outDuration           :    800,
          linkElement           :   ‘.animsition-link‘,
          // e.g. linkElement   :   ‘a:not([target="_blank"]):not([href^=#])‘
          loading               :    true,
          loadingParentElement  :   ‘body‘, //animsition wrapper element
          loadingClass          :   ‘animsition-loading‘,
          unSupportCss          : [ ‘animation-duration‘,
                                    ‘-webkit-animation-duration‘,
                                    ‘-o-animation-duration‘
                                  ],
          //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
          //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
          
          overlay               :   false,
          
          overlayClass          :   ‘animsition-overlay-slide‘,
          overlayParentElement  :   ‘body‘
        });
        

        function my_data(){
          var data = [];
          for( var i =0; i<30; i++){
            data.push(Math.round(Math.random() * (500 - 100) + 100));
          };
          return data;
        }
         
          
          //省份信息
          var sf_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: ‘南海诸岛‘,value: 0, 
                    itemStyle: {
                    normal: {
                        color: ‘#e4f9fb‘,
                        label: {
                            show: false
                        }
                    },
                    emphasis: {                 // 也是选中样式
                        color: ‘#e4f9fb‘,
                        label: {
                            show: false,
                            textStyle: {
                                color: ‘#fff‘
                            }
                        }
                    }
                },
                  }//去掉南海诸岛
              ]
          
          //排名前十前10的数据
          var sf_data10
          var sf10_value
          var sf10_name
          var zw_json = {name :‘-‘,value : 0};
          var len
          Sort_10(sf_data)
          function Sort_10(data){
            sf_data10 = [];
            sf10_value = [];
            sf10_name = [];
            len = data.length;
            
            for(var i=0; i<len; i++){
              sf_data10[i] = $.extend(true,{}, data[i]);
            }
            console.log(sf_data10.length)
            if(len < 10){
              for(var i=0; i<(10 - len); i++){
                sf_data10.push(zw_json);
              }
            }
            function size(){  
                var j = sf_data10[0].value;
                var n = sf_data10[0];
                var iNow = 0;
                for (var i=1;i<sf_data10.length ;i++ ){  
            
                    if(sf_data10[i].value>j){  
                        j = sf_data10[i].value;  
                        iNow = i;
                    }  
                }
                return sf_data10.splice(iNow,1);
            }  
            for(var i=0; i<10; i++){
              sf10_value.unshift(size()[0]);
              sf10_name.unshift(sf10_value[0].name);
            }
            //console.log(sf_data10)
          }
          
        
        
          //下拉省份选择
          var sf_length = sf_data.length - 1;
          var sf_options = ‘‘;
          for(var i=0; i<sf_length; i++){
            sf_options += ‘<option value="‘+ sf_data[i].name +‘">‘+ sf_data[i].name +‘</option>‘
          }
         
          $(‘#sf_select‘).html($(‘#sf_select‘).html() + sf_options);
          
          // 路径配置
            require.config({
                paths: {
                    echarts: ‘http://echarts.baidu.com/build/dist‘
                }
            });
            
            // 使用
            require(
                [
                    ‘echarts‘,
                    ‘echarts/chart/bar‘,
                    ‘echarts/chart/line‘,
                    ‘echarts/chart/pie‘,
                    ‘echarts/chart/map‘,// 使用柱状图就加载bar模块,按需加载
                ],
                function (ec) {
                    // 基于准备好的dom,初始化echarts图表
                    var myChart = ec.init(document.getElementById(‘main1‘),‘macarons‘);
                    var myChart2 = ec.init(document.getElementById(‘main2‘),‘macarons‘);
                    var ecConfig = require(‘echarts/config‘);
            var zrEvent = require(‘zrender/tool/event‘);
            var curIndx = 0;

            $(‘#sf_select‘).on(‘change‘,function(){
               var val = $(this).val();
               var sf_mapTypeControl = {};
               sf_mapTypeControl[val] = true;
               if(val == ‘china‘){
                Sort_10(sf_data);
                 myChart.setOption({
                   roamController: {
                        mapTypeControl: sf_mapTypeControl
                   },
                   series : [{
                      mapType: val,
                      data: sf_data
                     }]
                   });
                 
                 myChart2.setOption({
                   yAxis : [
                          {
                              data : sf10_name
                          }
                      ],
                   series : [{
                      data: sf10_value
                     }]
                   });
               }
               else{
                 Sort_10(sq_data[val]);
                 myChart.setOption({
                  roamController: {
                        mapTypeControl: sf_mapTypeControl
                    },
                   series : [{
                     mapType: val,
                      data: sq_data[val]
                    }]
                   });
                 myChart2.setOption({
                   yAxis : [
                          {
                              data : sf10_name
                          }
                      ],
                   series : [{
                      data: sf10_value
                     }]
                   });
               }
              
            });
                  
                   var option = {
                    backgroundColor : ‘#f3fffe‘,
                tooltip : {
                    trigger: ‘item‘,
                    //formatter: ‘滚轮切换或点击进入该省<br/>{b}‘
                },
                legend: {
                  show : false,
                    orient: ‘vertical‘,
                    x:‘right‘,
                    data:[‘客户数量‘]
                },
                dataRange: {
                    min: 0,
                    max: 1000,
                    y:‘top‘,
                    //color:[‘orange‘,‘yellow‘],
                    text:[‘高‘,‘低‘],           // 文本,默认为数值文本
                    calculable : true
                },
                  roamController: {
                    width : 60,
                    height : 90,
                    show: true,
                    x: ‘left‘,
                    y:‘bottom‘,
                    mapTypeControl: {
                        ‘china‘: true
                    }
                },
                series : [
                    {
                        name: ‘客户数量‘,
                        type: ‘map‘,
                        mapType: ‘china‘,
                        selectedMode : ‘single‘,
                        scaleLimit : {
                          min : 0.5,
                          max : 2
                        },
                        mapLocation :{
                          x : ‘right‘
                        },
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:sf_data
                  },
                 
                ]
            };
            
            var option2 = {
              backgroundColor : ‘white‘,
              title:{
                    text : ‘排名前10‘,
                    x : 48,
                    y : 15,
                    textStyle : {
                      fontSize : 12
                    }
                  },
                tooltip : {
                    trigger: ‘axis‘,
                },
                grid :{
                  y: 55,
                  y2: 80
                },
                legend: {
                  show : true,
                  y : ‘bottom‘,
                    borderWidth: 1,
                    padding: 8,   
                    data:[‘项目数‘]
                },
                toolbox: {
                    show : true,
                    y: 15,
                    itemSize : 12,
                    feature : {
                        //mark : {show: true},
                        dataView : {show: true},
                        //magicType: {show: true, type: [‘line‘, ‘bar‘]},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : ‘value‘,
                        boundaryGap : [0, 0.01]
                    }
                ],
                yAxis : [
                    {
                        type : ‘category‘,
                        data : sf10_name
                    }
                ],
                series : [
                    {
                        name:‘人数‘,
                        type:‘bar‘,
                        barMaxWidth : 10,
                        itemStyle: {
                      normal: {
                          color : ‘#36a2ef‘
                      }
                  },
                        data:sf10_value
                    }
                ]
            };
  
                    // 为echarts对象加载数据 
                    myChart.setOption(option); 
                    myChart2.setOption(option2); 
                  
                  }
              );
         
          //关闭提示
          $(‘.xsfx_tips  i‘).on(‘click‘,function(){
            $(this).parent().slideUp();
          })
      
      });

  

map code

标签:city   tool   date   none   url   开始   col   tcl   mst   

原文地址:https://www.cnblogs.com/zhyc010/p/9207073.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!