美文网首页
echarts 实现中国地图的操作

echarts 实现中国地图的操作

作者: 重启试试吧 | 来源:发表于2019-03-07 17:49 被阅读0次

    根据项目的要求在闪点地图上展示,在上传文件时闪点的状态让点变大变颜色,下载文件的城市节点变一个颜色,静态时节点一个样式,也就时说一个地图上要有点的状态要有三种。想了好久修修改改终于实现了。请看最终效果图

    map.png

    点击相对应的城市节点弹出模态框显示这个城市的详细信息如下图。

    map (2).png
    1. 首先下载:jquery.js , echarts.js , china.js文件;

    2. html代码: <div id="mainPie" class="mainPieStyle"></div>选定一个容器并且设置一个id;初始化图标的是填入设置的id;var myChartMaps = echarts.init(document.getElementById('mainPie'));
      最后 // 使用刚指定的配置项和数据显示图表 myChartMaps.setOption(optionMaps);。
      3.话不多说请看代码;
      var myChartMaps = echarts.init(document.getElementById('mainPie'));
      //配置地图
      myChartMaps.setOption({
      series: [{
      type: 'map',

               map: 'china'
           }]
       });
      
       // 给地图的每个小点添加点击事件
       myChartMaps.on('click', function (params) {
       console.log("this",params)
           if(params.componentType=="series"){
               thisModer(params);
               console.log("添加信息",params);
           }else if(params.componentType=="geo"){
           }
       }); 
      

      var rest
      $.ajax({
      url:"",
      type:"get",
      success:function(result){
      rest=result
      }
      })
      var city=rest.detail;
      // 静态
      var dataStatic=[];
      dataStatic.push({
      //填入数据
      name:city.YanCheng.city,_name:"YanCheng",value:100
      });

       // 下载
       // download
       var dataDownload = [];
      
       dataDownload.push({
      //填入数据
           name:city.ShenZhen.city,_name:"ShenZhen",value:100
       })
      

      // 上传
      // uploading
      var dataUploading=[];
      dataUploading.push({
      //填入数据
      name:city.ChengDou.city,_name:"ChengDou",value:100

       })
       var geoCoordMap = {
          "深圳":[114.0412,22.3712],
          "成都":[104.06,30.67],
          "南京":[118.46,32.03],
          "盐城":[119.57,32.85],
          "广州":[113.23,23.16],
          "北京":[115.25,39.26]
       };
      

    //静态
    var convertDataStatic= function (data) {

           var res = [];
           for (var i = 0; i < data.length; i++) {
               var geoCoord = geoCoordMap[data[i].name];
               if (geoCoord) {
                   
                   res.push({
                       city:data[i]._name,
                       name: data[i].name,
                       value: geoCoord.concat(data[i].value),
                       _data: city[data[i]._name]
                   });
               }
           }
         
           return res;
        };
    

    // 下载
    var convertDownload = function (data) {

           var res = [];
           for (var i = 0; i < data.length; i++) {
               var geoCoord = geoCoordMap[data[i].name];
               if (geoCoord) {
                   console.log("city[data[i]._name]",city[data[i]._name])
                   res.push({
                       city:data[i]._name,
                       name: data[i].name,
                       value: geoCoord.concat(data[i].value),
                       _data: city[data[i]._name]
                   });
               }
           }
         
           return res;
        };
        // 上传
    
        var convertUploading = function (data) {
            
            // console.log("cccccc22222",data)
           var res = [];
           for (var i = 0; i < data.length; i++) {
               var geoCoord = geoCoordMap[data[i].name];
               if (geoCoord) {
                   console.log("city[data[i]._name]",city[data[i]._name])
                   res.push({
                       city:data[i]._name,
                       name: data[i].name,
                       value: geoCoord.concat(data[i].value),
                       _data: city[data[i]._name]
                   });
               }
           }
         
           return res;
        };
        
    
       
      
    
             
        optionMaps = {
       
             backgroundColor:"pink",
           title: {
            //    text: '节点详情',
            //    subtext: 'data from PM25.in',
            //    sublink: 'http://www.pm25.in',
               left: 'center',
               textStyle: {
                   color: '#fff'
               }
           },
           tooltip : {
            trigger: 'item',
            // 设置悬浮框中的数据
            formatter: function(params) {
                console.log("thissssss",params)
                var res = params.data;
                var storss=(((res._data.stors)/1000)/1000)/1000;
                return "城市:"+ res.name +"<br/>节点数:" + res._data.clusters + "<br/>文件数:" + res._data.files + 
                "<br/>存储容量:" + storss + "GB<br/>"
            //公网IP:"+ res._data.publicIP + 
                //"<br/>内网IP:" + res._data.intranet;
            },
            // 设置提示框文字的样式
            textStyle:{
                color:"#00FF00",
                fontSize:20,
            },
           },
           geo: {
               map: 'china',
               label: {
                   emphasis: {
                     //    是否显示鼠标移入省份的时候显示出省份名称
                   show: true
                   }
               },
               roam: true,
               itemStyle: {
                
                   normal: {
                    //    设置地图的颜色
                    //    areaColor: '#92FEFE',
                       areaColor:"white",     
                    //    #F6EFA6
                       borderColor: '#111'
                   },
                   emphasis: {
                    //    鼠标移入/高亮的时地图的颜色
                       areaColor: '#00A0EA'
                   }
               },
           },
           
           series : [
       
            {
                name: 'pm2.5',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertDataStatic(dataStatic),
                 symbolSize:15,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        // 设置小点的颜色
                        color: "#00A0EA",
                    }
                }
            },
           
            //上传
            {
                name: '项目文件',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data:convertDownload(dataDownload),
                 //    设置点的大小
                symbolSize:20,
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                     //    显示地图小点上的文字
                        formatter: '{b}',
                     //    显示的位置
                        position: 'right',
                     //  设置小点字体的大小
                        fontSize:20,
                        
                     //    是否显示
                        show: true
                    }
                },
                itemStyle: {
                 //    设置点的颜色
                    normal:{
                        color:"rgb(252, 93, 7)",
                        // color:"rgba(255, 145, 0, 0.986)",
                    }
                },
             //    effect : {
             //     show: true,
             //     shadowBlur : 0
             // },
                zlevel: 1
            },
            // 下载
               {
                   name: '项目文件',
                   type: 'effectScatter',
                   coordinateSystem: 'geo',
                   data:convertUploading(dataUploading),
                    //    设置点的大小
                   symbolSize:20,
                   showEffectOn: 'render',
                   rippleEffect: {
                       brushType: 'stroke'
                   },
                   hoverAnimation: true,
                   label: {
                       normal: {
                        //    显示地图小点上的文字
                           formatter: '{b}',
                        //    显示的位置
                           position: 'right',
                        //  设置小点字体的大小
                           fontSize:20,
                           effect : {
                            show: true,
                            shadowBlur : 0
                        },
                        
    
                           
                        //    是否显示
                           show: true
                       }
                   },
                   itemStyle: {
                    //    设置点的颜色
                       normal:{
                         
                           color:"rgba(0, 184, 0, 0.835)",
                       }
                   },
             
                   zlevel: 1
               },
           ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartMaps.setOption(optionMaps);
    

    相关文章

      网友评论

          本文标题:echarts 实现中国地图的操作

          本文链接:https://www.haomeiwen.com/subject/bujhpqtx.html