基于echarts的中国地图（同事实现的效果，用于记录和分享）

 

 

 

采用的是echarts平台的地图插件，现在官网已经取消了这一效果演示

首先，css样式的配置

.main {
        width: 100%;
        height: 100%;
        position: relative;
        background: #404A59;
    }

html的标签元素：

<div class="map" style="height:100%; width:100%" id="map"></div>

 

然后就是js的option配置：

let _this = this;
this.myChart = echarts.init(document.getElementById("map"));
this.option = {
  backgroundColor: "#404a59",
  title: {
    text: "中国地图",
    x: "center",
    textStyle: {
    color: "#fff"
  }
},
tooltip: {
  padding: 0,
  enterable: false,
  transitionDuration: 1,
  textStyle: {
    color: "#000",
     // 悬浮框中的字体颜色
   },
   formatter: function (params) {
   let html = ''
   _this.computerData.map((val,ind)=>{
       if(val.areaname == params.name){
        val.room.map((item,index)=>{
        html += `<div>名称：${item.name}  数量：${item.alarm}</div>`
    })                                    
  }
  })
  let tipHtml = ''
  tipHtml =
  '<div id="on" data="one" style="maxHeight:360px;maxWidth:400px;border-radius:5px;background:#fff;box-shadow:0 0 10px 5px #aaa">' +
  '<div style="height:50px;width:100%;border-radius:5px;background:#F8F9F9;border-bottom:1px solid #F0F0F0">' + '<span style="line-height:50px;margin-left:18px">' +
  params.name + "</div>" +'<div style="background:#fff;padding: 20px; overflow:hidden">' +html
"    </div>"+'</div>' ;
  //动态创建表格
  // setTimeout(function () {
 //   tooltipCharts(params.name);
  // }, 10);
                            return tipHtml;
                        }
                    },
                    geo: {
                        map: this.mapName,
                        roam: false,
                        label: {
                            emphasis: {
                                show: false
                            },
                            normal: {
                                // 
                                show: false,
                                textStyle: {
                                    color: '#fff' //省份字体颜色
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                // 中国鸡的背景颜色
                                areaColor: "#323c48",
                                borderColor: "#111"
                            },
                            emphasis: {
                                // 鼠标移上地图的背景颜色
                                areaColor: "#2a333d"
                            }
                        }
                    },
                    series: [
                        {
                            roam: true,
                            type: 'scatter',
                            coordinateSystem: 'geo'
                        },
                        {
                            name: '散点',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: this.convertData(this.mapData),
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    // 省份的文字颜色
                                    color: '#05C3F9'
                                }
                            }
                        },
                    ]
                }

点击地图上的省市区跳转

实现效果：点击地图上显示的省份时，判断是否为省级，省级的id都为2位数，如果是省就进入市级，如果是市级，就进入区级；如果是直辖市，进入区别

this.myChart.on("click", function (mapParams) {
   if(mapParams.data){
   _this.xc = mapParams.data.id
   _this.mapName = mapParams.data.id
   _this.mapList.map((val, index) => {
   // 小于200，省的id都为2位数，所以小于200，上一个人的偷懒写法
   if (val.properties.name == mapParams.name && val.properties.id < 200) {
      _this.getMapData()
      let province = require(`../../assets/map/geometryProvince/${val.properties.id}.json`)
      console.log(province)
      echarts.registerMap(mapParams.data.id, province);
      _this.mapList = province.features
      // 大于200，市的id都为6位数，所以大于等于200，判断是否是为市
      }else if(val.properties.name == mapParams.name && val.properties.id >= 200 && !_this.city){
       _this.getMapData()
       _this.city = true
       let province = require(`../../assets/map/geometryCouties/${val.properties.id}00.json`)
       console.log(_this.mapName);
       console.log(province)
       console.log(mapParams.data.id)
       echarts.registerMap(mapParams.data.id, province);
       _this.mapList = province.features
    }else if(val.properties.name == mapParams.name && val.properties.id >= 200 && _this.city){
       _this.$router.push({
           path: `/computerList/${val.properties.id}`,
       })
      }
    })
   }
 });