mapFans.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,cityArr } from "../../../public/echarts/city.js"
export default {
  data() {
    return {
      cityData: cityArr,
      flag: true,
      initOptions: {
        renderer: 'canvas'
      },
      pointArray: [],
      GLOptions: null,
      normalDistributionNumber: 150, // 正态分布扩散数量
      dataArray: [],
      geoGPS: {},
      oldMapData: {},
      isLoadFlights: true, // 是否设置echrts配置项
    };
  },
  // props: ['optionList','cityObj'],
  props:{
    cityObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: String,
      default: () => {
        return ''
      }
    },
    optionList: {
      type: Array,
      default: () => {
        return []
      }
    },
    mapStyle: {
      type: Object,
      default: () => {
        return {
          width:'',
          height:'900',
          tooltip:true,
          zoom:1.2,
        }
      }
    },
  },
  watch: {
    optionList() {
      this.setEchartOption();
    },
  },
  methods: {
    convertData(data) {
      var res = []
      if (this.optionList.length > 0) {
        res = this.optionList.map(it => {
          return [
            {
              coord: this.cityObj.gps,
            },
            {
              coord: it.value,
              name: it.city,
              value: it.uv,
            }
          ]
        })
      }
      return res
    },
    setEchartOption() {
      this.myEchart = echarts.init(document.getElementById("china_map"));
      echarts.registerMap('chinas', chinaJson);
      var series = [
        {
          type: 'scatter', //样试
          coordinateSystem: 'geo', //该系列使用的坐标系
          data: this.cityData,
          label: {
            formatter: "{b}",
            position: "",
            show: true,

          },
          //标记的大小,可以设置数组或者函数返回值的形式
          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: 12
            },
          },
          zlevel: 1
        },
        {
          name: 'totip',
          type: 'lines',
          coordinateSystem: 'geo',
          zlevel: 10,
          effect: {
            show: false,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: .2, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 0, //图标大小
            color: '#FFB932', // 图标颜色
          },
          lineStyle: {
            normal: {
              show: true,
              width: 1, //尾迹线条宽度
              opacity: .8, //尾迹线条透明度
              curveness: 0.2, //尾迹线条曲直度
              color: new echarts.graphic.LinearGradient(0,1,1,0,
                [
                  {
                    offset: 0,
                    color: "#FFB932",
                  },
                  {
                    offset: 1,
                    color: "#26FFF3",
                  },
                ],
              ),
              // color: '#26FFF3', // 飞线颜色
            },
          },
          data: this.convertData(),
        },
        {
          type: 'effectScatter',
          name: 'totip',
          coordinateSystem: 'geo',
          zlevel: 1,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: 'fill', //波纹绘制方式 stroke, fill
            scale: 6, //波纹圆环最大限制，值越大波纹越大
            color: '#0CB5AD',
          },
          label: {
            normal: {
              show: false,
              position: 'right', //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params) {
                //圆环显示文字
                return params.data.name
              },
              fontSize: 13,
            },
            emphasis: {
              show: false,
            },
          },
          symbol: 'circle',
          symbolSize: function (val) {
            // console.log(val,8888888)
            if (val[2]<50){
              return 4
            }
            if (val[2]<100){
              return 5
            }
             if (val[2]<200){
              return 6
            }
            if (val[2]<500){
              return 7
            }
            if (val[2]>1000){
              return 10
            }
           
          },
          itemStyle: {
            normal: {
              show: false,
              color: '#0CB5AD',
            },
          },
          data: this.optionList,
        },
        //中心点
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 15,
          rippleEffect: {
            period: 4,
            brushType: 'fill',
            scale: 4,
            color: '#FFB932',//圆环颜色
          },
          label: {
            normal: {
              show: true,
              position: 'bottom',
              //offset:[5, 0],
              color: '#FFB932',
              formatter: '{b}',
              textStyle: {
                color: '#fff',
                fontSize: 12,
              },
            },
            // emphasis: {
            //   show: false,
            //   color: '#FFB932',
            // },
          },
          symbol: 'circle',
          symbolSize: 15,
          itemStyle: {
            color: '#FFB932',//中心点颜色
          },
          data:[
              {
                name: this.cityObj.city || '',
                value: this.cityObj.gps || '',
              },
              ] ,
        }
      ]
      var that = this
      var option = {
        geo: {
          map: 'chinas',
          zoom: this.type === 'wap' ? 4 :this.mapStyle.zoom, // 地图缩放率
          roam: true,
          center: this.type === 'wap' ?this.cityObj.gps||[116.40529, 39.904987]:[120.40529, 35.904987],
          silent: 'move', // 拖拽以及缩放
          itemStyle: {
            normal: {
              areaColor: '#1E2F56', // 地图颜色
              borderColor: '#33547E', // 地图边界颜色
              borderWidth: .5
            }
          },
        },
        scaleLimit:{                       //所属组件的z分层，z值小的图形会被z值大的图形覆盖
          min:0.8,                          //最小的缩放值
          max:10,                            //最大的缩放值
        },
        series: series,
        tooltip: {
          trigger: "item",
          borderColor: 'transparent',
          show: this.mapStyle.tooltip,
          transitionDuration: 0,
          showContent: true,
          enterable: true,
          backgroundColor: 'transparent', // 提示框浮层的背景颜色。
          axisPointer: { // 坐标轴指示器配置项。
            type: 'shadow', // '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 obj = that.optionList[params.dataIndex]
            var str = ''
            console.log(params,9999)
            // if (params.seriesName==='totip'){
              if (params.name === that.cityObj.city){
              str = `<a class="popover-title" href="https://blog.csdn.net/${that.cityObj.username}" target="_blank">  <img src="${that.cityObj.avatar}" alt=""> <span>${that.cityObj.nickname||that.cityObj.username}</span></a>
              <p class="popover-city"><i></i><span class="city">${that.cityObj.city}</span> <span>铁粉数</span> <span class="num">${that.cityObj.score}</span></p>
              `
              }else{
                str = `<p class="popover-title">地区</p>
                    <p class="popover-city"><i></i><span class="city">${obj.name}</span> <span>铁粉数</span> <span class="num">${obj.uv}</span></p>`
              }
              return (
                `<div class="popover-fans">
                  <div class="popover-top">
                    ${str}
                  </div>
                </div>`
              );
            // }
            
          },
        },
      };
      this.myEchart.setOption(option);
      // 自适应
      window.addEventListener("resize", () => {
        if (this.myEchart) {
          this.myEchart.resize();
        }
      });
      // 点击地图
    },

  },
  beforeDestroy(){
    this.myEchart && this.myEchart.clear();
  },
  created(){

  },
  mounted() {
    // this.mapStyle.width = document.documentElement.clientWidth
    // this.mapStyle.height = document.documentElement.clientHeight
    this.setEchartOption();
    this.myEchart.on('click', (params) => {
      this.$emit('fansObj',{obj:this.optionList[params.dataIndex],flag:params.name === this.cityObj.city})
    })
  },
};
</script>
<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;
}
.map-city {
  width: 360px;
  height: 258px;
}
// #china_map {
//   width: 1200px;
//   height: 900px;
// }
.popover-fans {
    width: 250px;
    height: 94px;
    background-image: url("@/assets/img/popover-fans.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;
      display: flex;
      align-items: center;
      img{
        height: 24px;
        width: 24px;
        border-radius: 50%;
        margin-right: 8px;
      }
      span{
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
    }
    .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;
        }
      }
    }
  }
.csdn-map {
  
  // .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-city {
  //     height: 44px;
  //     line-height: 44px;
  //     padding: 0 16px;
  //     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;
  //     padding: 0 16px;
  //     p {
  //       font-size: 14px;
  //       font-weight: 500;
  //       color: rgba(119, 192, 255, 0.7);
  //     }
  //     &.active {
  //       p {
  //         color: #77c0ff;
  //       }
  //       .num {
  //         color: #29ffa3;
  //       }
  //       &:hover {
  //         background: rgba(95, 151, 213, 0.3);
  //         cursor: pointer;
  //       }
  //     }
  //   }
  // }
}
/* .wrapper{
  background: #0f0;
} */
</style>