mapForce.vue

<template>
  <div class="csdn-map">
    <div id="china_map" :style="`width:${mapStyle.width}px;height:${mapStyle.height}px;`" ref="myEchart1"></div>
  </div>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";
// 引入中国，城市地图
import { chinaJson } from "../../../public/echarts/city.js"
import Bus from "@/common/bus"
export default {
  data() {
    return {
      flag: true,
      initOptions: {
        renderer: 'canvas'
      },
      pointArray: [],
      GLOptions: null,
      normalDistributionNumber: 150, // 正态分布扩散数量
      pointSize: 2, // 地图点的大小
      pointColor: '#E95307', // 地图点的颜色
      dataArray: [],
      dataList:[],
      geoGPS: {},
      oldMapData: {},
      isLoadFlights: true, // 是否设置echrts配置项
    };
  },
  // props:['optionList','title','mapStyle'],
  props:{
    type: {
      type: String,
      default: () => {
        return ''
      }
    },
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    optionList: {
      type: Array,
      default: () => {
        return []
      }
    },
    mapStyle: {
      type: Object,
      default: () => {
        return {
          width:'1000',
          height:'900',
          zoom:1,
          tooltip:true
        }
      }
    },
  },
  watch:{
     optionList () {
      this.renderMap()
    },
    mapStyle () {
      this.renderMap()
    }
  },
  methods: {
    randomData() {
      return Math.round(Math.random() * 1000);
    },
    renderMap() {
      this.handleData(this.optionList)
      this.setEchartOption()
    },
    handleData(res) {
      for (let i = 0; i < res.length; i++) {
        let dataObj = {
          name: '',
          value: ''
        }
        let resObj = res[i]
        dataObj.name = resObj.city
        if (this.title !== '铁粉数'){
          dataObj.value = resObj.score /3000
        }else{
          dataObj.value = resObj.score/40
        }
        dataObj.score = resObj.score
        dataObj.list = resObj.list
        this.dataArray.push(dataObj)
        this.geoGPS[resObj.city] = resObj.gps
      }
      this.dataArray = this.dataArray.sort(function (a, b) {
              return b.value - a.value;
            })
      this.dataList = this.dataArray
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoGPS[data[i].name];

        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          })
        }
      }
      return res;
    },
    setEchartOption() {
      this.myEchart = echarts.init(document.getElementById("china_map"));
      echarts.registerMap('chinas', chinaJson);
      var that = this
      var option = {
        geo: {
          map: 'chinas',
          zoom: this.mapStyle.zoom, // 地图缩放率
          roam: true,
          center: this.type === 'wap'?[104.40529, 24.904987]:[120.40529, 35.904987], // 地图中心点
          silent: 'move', // 拖拽以及缩放
          itemStyle: {
            normal: {
              areaColor: '#1E2F56', // 地图颜色
              borderColor: '#33547E', // 地图边界颜色
              borderWidth: .5
            }
          },
          scaleLimit:{                       //所属组件的z分层，z值小的图形会被z值大的图形覆盖
            min:0.8,                          //最小的缩放值
            max:10,                            //最大的缩放值
          }
        },
        tooltip: {
          trigger: "item",
          borderColor: 'transparent',
          show: this.mapStyle.tooltip,
          transitionDuration: 0,
          showContent: true,
          enterable: true,
          backgroundColor: 'transparent', // 提示框浮层的背景颜色。
          axisPointer: { // 坐标轴指示器配置项。
            type: 'line', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: 'auto', // 指示器的坐标轴。 
            snap: true, // 坐标轴指示器是否自动吸附到点上
          },
          textStyle: { // 提示框浮层的文本样式。
            color: '#41feff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 14,
          },
          padding: 0, // 提示框浮层内边距， 
          formatter: function (params) {
            var str = ''
            if (params) {
              var demo = ''
              if (that.dataArray[params.dataIndex].list.length>0){
                that.dataArray[params.dataIndex].list.forEach((item,index) => {
                  if (index<3){
                    demo += `<a href="${`https://blog.csdn.net/`+item.username}" target="_blank" class="exhibition active"><p>${index+1}</p> <p class="img"> <img src="${item.avatar}" alt=""> <span>${item.nickname || item.username}</span></p> <p class="num">${item.score}</p></a>`
                  }
                });
              }else{
                demo = ` <div class="popover-empty">
                        <span>暂无上榜</span>
                        <a href="" target="_blank">前往查看热榜更新规则</a>
                      </div>`
              }
              str = `<div class="popover">
                    <div class="popover-top">
                      <p class="popover-title">上榜用户</p>
                      <p class="popover-city"><i class="el-icon-location-outline"></i><span class="city">${params.name}</span> <span>${that.title}</span> <span class="num">${that.dataArray[params.dataIndex].score}</span></p>
                      <div class="exhibition"><p>排名</p> <p class="img">用户</p> <p>${that.title}</p></div>
                      ${demo}
                    </div>
                  </div>`
            } 
            return str

          },
        },
        series: [
          // {
          //   type: 'scatter', //样试
          //   coordinateSystem: 'geo', //该系列使用的坐标系
          //   data: this.cityData,
          //   //标记的大小,可以设置数组或者函数返回值的形式
          //   // symbolSize: function (val) {
          //   //   return 0;
          //   // },
          //   hoverAnimation: false, //鼠标移入放大圆
          //   tooltip: {
          //     show: false
          //   },
          //   encode: {
          //     value: 10
          //   },
          //   showEffectOn: "render",
          //   hoverAnimation: false, // 动画
          //   label: {
          //     formatter: "{b}",
          //     position: "",
          //     show: true,
          //     textStyle: { //图例文字的样式
          //                   color: '#fff',
          //                   fontSize: 13
          //               },

          //   },
            
          //   zlevel: 10
          // },
          {
            name: 'Top 20',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.dataArray).slice(0, 10),
            symbolSize: function (val) {
              if (that.type === 'wap') {
                if (val[2] / 40 <= 6) {
                  return 6;
                } else {
                  return val[2] / 40;
                }
              }
              if (val[2] / 40 <= 8) {
                return 8;
              } else {
                return val[2] / 40;
              }
            },
            encode: {
              value: 10
            },
            showEffectOn: 'render',
            hoverAnimation: true,
            label: {
              formatter: '{b}',
              position: 'left',
              show: true,
                  textStyle: { //图例文字的样式
                            color: '#fff',
                            fontSize: 13
                        },
            },
            itemStyle: {
              color: '#549AD7',
              shadowBlur: 10,
              shadowColor: '#333'
            },
            zlevel: 10
          },
        ]
      };
      this.myEchart.setOption(option);
      window.addEventListener("resize", () => {
        if (this.myEchart) {
          this.myEchart.resize();
        }
      });
    },
 
  },
  beforeDestroy(){
    this.myEchart && this.myEchart.clear();
  },
  mounted() {
    this.renderMap()
    this.myEchart.on('click', (chinaParam) => {
        if (chinaParam.seriesName === "Top 20"){
          this.$emit('setrankList',{list:this.dataArray[chinaParam.dataIndex].list,city:chinaParam.name})
          Bus.$emit('popupObj',{obj:this.dataArray[chinaParam.dataIndex],title:'上榜用户',navname:"铁粉数"})
        }
      })
      this.myEchart.on('georoam',(params)=> {
      // 逻辑代码
        let _option = this.myEchart.getOption()
        let _zoom = _option.geo[0].zoom; 
        if ( _zoom<=1.5){
          this.dataArray = this.dataList.slice(0,10)
        }
        if (1.5<_zoom&& _zoom<=3){
          this.dataArray = this.dataList.slice(0,20)
        }
        if (3<_zoom&& _zoom<=4){
          this.dataArray = this.dataList.slice(0,50)
        }
         if (4<_zoom&& _zoom<=6){
          this.dataArray = this.dataList.slice(0,90)
        }
        if (6<_zoom&& _zoom<=9){
          this.dataArray = this.dataList.slice(0,280)
        }
        if (9<_zoom&& _zoom<=10){
          this.dataArray = this.dataList
        }
        _option.series[0].data = this.convertData(this.dataArray);
        this.myEchart.setOption(_option);
      })

  },
};
</script>
<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;
}
.map-city {
  width: 360px;
  height: 258px;
}
// #china_map {
//   width: 1200px;
//   height: 900px;
//   z-index: 1;
// }
.csdn-map {
  overflow: hidden;
  .popover {
    width: 360px;
    height: 258px;
    background-image: url("@/assets/img/popover.png");
    background-size: cover;
    padding-top: 10px;
    .popover-title {
      font-size: 16px;
      font-weight: 500;
      color: #77c0ff;
      height: 36px;
      line-height: 36px;
      padding: 0 16px;
    }
    .popover-empty {
      height: 120px;
      text-align: center;
      span {
        font-size: 18px;
        font-weight: 500;
      }
      a {
        font-size: 14px;
        font-weight: 500;
        color: #77c0ff;
      }
    }
    .popover-city {
      height: 44px;
      line-height: 44px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      i {
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url("@/assets/img/place.png");
        background-size: cover;
      }
      span {
        font-size: 14px;
        font-weight: 500;
        color: #77c0ff;
        &.city {
          margin-right: 48px;
        }
        &.num {
          color: #29ffa3;
        }
      }
    }
    .exhibition {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-decoration:none;
      padding: 0 16px;
      p {
        font-size: 14px;
        font-weight: 500;
        color: rgba(119, 192, 255, 0.7);
        text-align: start;
        
        &:nth-child(1){
          width: 30px;
          text-align: center;
        }
        &:nth-child(3){
          width: 90px;
          text-align: right;
        }
        &.img{
          flex:1;
          margin-left: 40px;
          display: flex;
          align-items: center;
          span{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
        }
      }
      img{
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 8px;
      }
      &.active {
        p {
          color: #77c0ff;
        }
        .num {
          color: #29ffa3;
        }
        &:hover {
          background: rgba(95, 151, 213, 0.3);
          cursor: pointer;
        }
      }
    }
  }
}
/* .wrapper{
  background: #0f0;
} */
</style>