From fd2525411aa8826ab66adad73ab4c267c1bd805a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=99=BE=E9=93=AD?= <957167412@qq.com>
Date: Wed, 16 Nov 2022 11:20:09 +0800
Subject: [PATCH] interest page update

---
 src/view/pc/interest.vue         |   2 +-
 src/view/pc/interestRankList.vue |   2 +-
 src/view/pc/mapInterest.vue      | 459 +++++++++++++++++++++++++++++++
 3 files changed, 461 insertions(+), 2 deletions(-)
 create mode 100644 src/view/pc/mapInterest.vue

diff --git a/src/view/pc/interest.vue b/src/view/pc/interest.vue
index 1886149..f17ed33 100644
--- a/src/view/pc/interest.vue
+++ b/src/view/pc/interest.vue
@@ -10,7 +10,7 @@
   </div>
 </template>
 <script>
-import ForceMap from './mapForce.vue'
+import ForceMap from './mapInterest.vue'
 import RankList from "./interestRankList.vue";
 import { getForceInfo } from '@/server/screen-data'
 export default {
diff --git a/src/view/pc/interestRankList.vue b/src/view/pc/interestRankList.vue
index 8df2eb6..e03e63c 100644
--- a/src/view/pc/interestRankList.vue
+++ b/src/view/pc/interestRankList.vue
@@ -36,7 +36,7 @@
         <li class="rank-list-nav active" v-for="(item,index) in rankData" :key="index" @click="rankAdd(item)">
           <span class="mar">{{index+1}}</span>
           <p>
-            <img :src="item.avatar" alt="" /><span
+            <span
           >{{item.nickname || item.username}}</span
           >
           </p>
diff --git a/src/view/pc/mapInterest.vue b/src/view/pc/mapInterest.vue
new file mode 100644
index 0000000..0eb3ff1
--- /dev/null
+++ b/src/view/pc/mapInterest.vue
@@ -0,0 +1,459 @@
+<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 echarts from "@/components/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 /110
+        }else{
+          dataObj.value = resObj.score/300
+        }
+        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() {
+      if (!this.myEchart) {
+        echarts.registerMap('chinas', chinaJson);
+        this.myEchart = echarts.init(document.getElementById("china_map"));
+      }
+      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: {
+            areaColor: '#1E2F56', // 地图颜色
+            borderColor: '#33547E', // 地图边界颜色
+            borderWidth: .5
+          },
+          scaleLimit:{                       //所属组件的z分层，z值小的图形会被z值大的图形覆盖
+            min:0.8,                          //最小的缩放值
+            max:35,                            //最大的缩放值
+          }
+        },
+        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 class="back rank_${index+1}"></p> <p class="img">  <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">  <a href="${`https://blog.csdn.net/`+that.dataArray[params.dataIndex].list[0].username}" target="_blank"> <span class="name"> ${that.dataArray[params.dataIndex].list[0].nickname || that.dataArray[params.dataIndex].list[0].username} </span></a> 成为 <span> ${params.name} </span> 技术兴趣之首 </p>
+                      <p class="popover-city"><i class="force"></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: [
+          {
+            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',
+            emphasis: {
+              scale: true,
+            },
+            label: {
+              formatter: '{b}',
+              position: 'left',
+              show: true,
+              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: 300px;
+    height: 258px;
+    background-image: url("@/assets/img/popover.png");
+    background-size: cover;
+    padding-top: 10px;
+    .popover-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: rgba(119,192,255,0.7);
+      height: 36px;
+      line-height: 36px;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      img{
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+      span{
+        color: #77C0FF;
+        margin: 0 6px;
+
+      }
+      a{
+        display: flex;
+        align-items: center;
+      }
+      span.name{
+        margin-left: 0px;
+        max-width: 78px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+      }
+    }
+    .back{
+      height: 26px;
+      width: 20px !important;
+      margin: 0 5px;
+      &.rank_1{
+        background-image: url('@/assets/img/rank_1.png');
+        background-size: cover;
+      }
+      &.rank_2{
+        background-image: url('@/assets/img/rank_2.png');
+        background-size: cover;
+      }
+      &.rank_3{
+        background-image: url('@/assets/img/rank_3.png');
+        background-size: cover;
+      }
+
+    }
+    .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.force {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background-image: url("@/assets/img/place-pc.png");
+        background-size: cover;
+      }
+      span {
+        font-size: 14px;
+        font-weight: 500;
+        color: #77c0ff;
+        margin-left: 4px;
+        &.city {
+          margin-right: 48px;
+        }
+        &.num {
+          color: rgba(41, 255, 163, 0.8);
+        }
+      }
+    }
+    .exhibition {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      text-decoration:none;
+      padding: 0 16px;
+      margin: 0 2px;
+      p {
+        font-size: 14px;
+        font-weight: 500;
+        color: rgba(119, 192, 255, 0.7);
+        text-align: start;
+        display: flex;
+        &:nth-child(1){
+          width: 30px;
+          text-align: center;
+        }
+        &:nth-child(3){
+          width: 80px;
+          text-align: center;
+          margin-left:10px ;
+        }
+        &.img{
+          width: 120px;
+          margin-left: 24px;
+          display: flex;
+          align-items: center;
+          span{
+            display: inline-block;
+            width: 88px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -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: rgba(41, 255, 163, 0.8);
+        }
+        &:hover {
+          background: #141f38;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+/* .wrapper{
+  background: #0f0;
+} */
+</style>
\ No newline at end of file
-- 
GitLab