qy_bigScreen/src/views/map/index.vue

<template>
  <div class="map-wrapper">
    <div class="map-content">
      <div class="lib-info">
        <div class="database-title">{{ libCurrent && libCurrent.name }}</div>
        <div class="lib-content">
          <swiper v-if="swiperOption" :key="swiperKey" ref="mySwiper" class="swiperLib" :options="swiperOption">
            <swiper-slide v-for="(item,index) in displayedImages" :key="index">
              <div class="book-img" style="width: 100%; height: 3rem;">
                <img :src="item.cover" :onerror="defaultImg" style="width: 100%;">
              </div>
            </swiper-slide>
            <!-- 标页码 -->
            <div slot="pagination" class="swiper-pagination" />
          </swiper>
          <ul class="lib-cont-item lib-cont01">
            <li>
              <img src="@/assets/images/map_18.png" alt="">
              <p>
                <span>藏书量</span>
                <span>4787<i>本</i></span>
              </p>
            </li>
            <li>
              <img src="@/assets/images/map_20.png" alt="">
              <p>
                <span>办证量</span>
                <span>74<i>人</i></span>
              </p>
            </li>
          </ul>
          <ul class="lib-cont-item lib-cont02">
            <li>
              <img src="@/assets/images/map_28.png" alt="">
              <p>
                <span>占地面积</span>
                <span>45<i>平方米</i></span>
              </p>
            </li>
          </ul>
          <div class="scroll-container">
            <div ref="marquee" class="lib-text" :style="{ top: position + 'px' }">关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通</div>
          </div>
        </div>
      </div>
      <div ref="chart" style="flex: 1; margin:0 .125rem; z-index: 9999;" />
      <div class="map-hx-bg">
        <div class="map-hx-small" />
        <div class="map-hx-big" />
      </div>
      <div class="read-num">
        <div class="database-title">读者统计</div>
        <div class="online">
          <p>累计办证人数</p>
          <p class="num"><span>156</span><i>人</i></p>
        </div>
        <div class="lending-ranking">
          <h5>借阅Top10</h5>
          <div class="ranking-cont">
            <ul class="ranking-title">
              <li style="width: 0.8rem;">排名</li>
              <li style="width: 1.5rem; text-align: left; padding-left: 0.25rem;">姓名</li>
              <li style="flex:1;" />
              <li style="width: 1.75rem; text-align: right; padding-right: .375rem;">借阅次数</li>
            </ul>
            <ul class="ranking-list">
              <li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
                <div style="width: 1rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
                <div style="width: 1.5rem; text-align: left; padding-left: .25rem;">{{ item.name }}</div>
                <div class="ranking-progress" style="flex:1; align-self: center;">
                  <el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" color="#009afb" />
                </div>
                <div style="width: 1.75rem; text-align: right; padding-right: .375rem;">{{ item.num }}<i>次</i></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mapJson from '@/assets/json/qy.json'
import libJson from '@/assets/json/lib2.json'
import libJsonData from '@/assets/json/lib.json'
import { debounce } from 'lodash' // js工具类,按需加载
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'Map',
  components: {
    swiper, swiperSlide
  },
  data() {
    return {
      currentHover: -1,
      timeTicket: null,
      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
      count: 0,
      len: 0, // 轮播数组的长度， 通过 count % len 可以得到[0, len-1] 数组下标
      headerTitle: '祁阳图书馆',
      libInfoData: [],
      libImg: [
        {
          'id': 1,
          'cover': require('../../assets/images/lib.jpg')
        },
        {
          'id': 2,
          'cover': require('../../assets/images/lib2.jpg')
        },
        {
          'id': 3,
          'cover': require('../../assets/images/lib3.jpg')
        },
        {
          'id': 4,
          'cover': require('../../assets/images/lib4.jpg')
        },
        {
          'id': 5,
          'cover': require('../../assets/images/lib5.jpg')
        }
      ],
      libIndex: 0,
      libCurrent: null,
      swiperKey: 1,
      currentIndex: 0,
      displayedImages: [],
      swiperOption: null,
      seriesData: [],
      mapImg: require('../../assets/images/map-bg2.png'),
      rankingData: [
        { id: 1, num: 718, name: '胡图图' },
        { id: 2, num: 447, name: '张三三' },
        { id: 3, num: 261, name: '李晓明' },
        { id: 4, num: 242, name: '胡图图' },
        { id: 5, num: 165, name: '胡图图' },
        { id: 6, num: 140, name: '胡图图' },
        { id: 7, num: 120, name: '胡图图' },
        { id: 8, num: 100, name: '胡图图' },
        { id: 9, num: 70, name: '胡1' },
        { id: 10, num: 60, name: '胡图图' }
      ],
      rankingWithPercentage: [],
      timer: null,
      position: 0,
      speed: 2 // 滚动速度，可根据需要调整
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  beforeDestroy() {
    clearTimeout(this.timeTicket)
    window.removeEventListener('resize', this.resize)
    this.stopScrolling()
  },
  created() {
    this.libInfoData = libJsonData
  },
  mounted() {
    this.count = 0
    this.initChart() // 初始化
    setTimeout(() => {
      this.updateChart() // 更新数据，散点轮播显示
      // this.mouseMove() // 鼠标移入移出效果
      window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内
    }, 300)
    this.rankingDataComputed()
    if (document.getElementsByClassName('scroll-container')[0]) {
      this.startScrolling()
    }
    setInterval(() => {
      this.currentHover = (this.currentHover + 1) % this.rankingData.length
    }, 1000)
  },
  methods: {
    escapeHtml(str) {
      var arrEntities = {
        'lt': '<',
        'gt': '>',
        'nbsp': ' ',
        'amp': '&',
        'quot': '"'
      }
      return str.replace(/&(lt|gt|nbsp|amp|quot|pre);/ig, function(all, t) {
        return arrEntities[t]
      })
    },
    startScrolling() {
      this.timer = setInterval(() => {
        this.position -= this.speed
        // 当文字完全滚出容器时，重置位置
        const containerHeight = document.getElementsByClassName('scroll-container')[0].offsetHeight
        const contentHeight = this.$refs.marquee.offsetHeight
        if (contentHeight <= containerHeight) {
          this.position = 20
        } else if (Math.abs(this.position) >= contentHeight) {
          this.position = containerHeight
        }
      }, 40)
    },
    stopScrolling() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    rankingDataComputed() {
      const firstPlaceNum = this.rankingData[0].num
      this.rankingWithPercentage = this.rankingData.map(item => {
        if (item.name.length === 2) {
          // 截取name 字符串截取第一个字符，
          item.name = item.name.substring(0, 1) + ' * '
        } else if (item.name.length === 3) {
          // 截取第一个和第三个字符
          item.name = item.name.substring(0, 1) + ' * ' + item.name.substring(2, 3)
        } else if (item.name.length > 3) {
          // 截取第一个和大于第4个字符
          item.name = item.name.substring(0, 1) + ' * ' + ' * ' + item.name.substring(3, item.name.length)
        }
        const percentage = (item.num / firstPlaceNum) * 100
        return { ...item, percentage }
      })
    },
    initChart() {
      this.$echarts.registerMap('qiyang', mapJson) // 注册map
      this.myChart = this.$echarts.init(this.$refs.chart) // echarts容器实例化

      var mapImg = document.createElement('img')
      mapImg.style.height = mapImg.height = mapImg.width = mapImg.style.width = '1px'
      mapImg.src = require('../../assets/images/map-bg2.png')

      var XAData = [
        [{ name: '陶铸图书馆' }, { name: '陶铸图书馆', value: '陶铸陶铸陶铸陶铸陶铸陶铸陶铸陶铸陶铸陶铸陶铸陶铸陶铸陶铸陶铸陶铸陶铸' }],
        [{ name: '陶铸图书馆' }, { name: '龙山街道分馆', value: '龙山街道龙山街道龙山街道龙山街道龙山街道龙山街道' }],
        [{ name: '陶铸图书馆' }, { name: '黎家坪分馆', value: '龙山街道龙山街道龙山街道龙山街道龙山街道龙山街道' }],
        [{ name: '陶铸图书馆' }, { name: '大村甸分馆', value: '龙山街道龙山街道龙山街道龙山街道龙山街道' }],
        [{ name: '陶铸图书馆' }, { name: '邵家岭自助馆', value: '邵家岭' }],
        [{ name: '陶铸图书馆' }, { name: '下马渡分馆', value: '下马渡' }],
        [{ name: '陶铸图书馆' }, { name: '复兴路自助馆', value: '复兴路' }],
        [{ name: '陶铸图书馆' }, { name: '七里桥分馆', value: '七里桥' }],
        [{ name: '陶铸图书馆' }, { name: '少儿馆', value: '少儿馆' }],
        [{ name: '陶铸图书馆' }, { name: '茅竹镇分馆', value: '祁阳县茅竹镇' }],
        [{ name: '陶铸图书馆' }, { name: '观音滩镇分馆', value: '观音滩镇' }],
        [{ name: '陶铸图书馆' }, { name: '凯俊盛科城分馆', value: '凯俊盛科城' }],
        [{ name: '陶铸图书馆' }, { name: '进宝塘镇分馆', value: '进宝塘镇' }],
        [{ name: '陶铸图书馆' }, { name: '三口塘镇分馆', value: '三口塘镇' }],
        [{ name: '陶铸图书馆' }, { name: '肖家镇分馆', value: '肖家镇' }],
        [{ name: '陶铸图书馆' }, { name: '潘市镇分馆', value: '潘市镇' }],
        [{ name: '陶铸图书馆' }, { name: '大忠桥镇分馆', value: '大忠桥镇' }],
        [{ name: '陶铸图书馆' }, { name: '浯溪街道分馆', value: '浯溪街道' }],
        [{ name: '陶铸图书馆' }, { name: '长虹街道分馆', value: '长虹街道' }],
        [{ name: '陶铸图书馆' }, { name: '白水镇分馆', value: '白水镇' }],
        [{ name: '陶铸图书馆' }, { name: '白竹湖自助馆', value: '白竹湖' }]
      ]
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = libJson[dataItem[0].name]
          var toCoord = libJson[dataItem[1].name]
          if (fromCoord && toCoord) {
            res.push({
              fromName: dataItem[0].name,
              toName: dataItem[1].name,
              coords: [fromCoord, toCoord],
              value: dataItem[1].value
            })
          }
        }
        return res
      }
      var series = [];
      [
        ['陶铸图书馆', XAData]
      ].forEach(function(item, i) {
        series.push(
          {
            name: item[0],
            type: 'effectScatter',
            symbol: 'image://' + require('@/assets/images/map_10.png'),
            symbolSize: [26, 20],
            coordinateSystem: 'geo',
            zlevel: 3,
            selectedMode: false,
            rippleEffect: {
              // brushType: 'stroke',
              color: 'transparent'
              // scale: 1.5
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: ''
              }
            },
            itemStyle: {
              normal: {
                color: 'transparent',
                areaColor: 'transparent'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            tooltip: {
              show: true
            },
            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[1].name,
                value: libJson[dataItem[1].name].concat([dataItem[1].value]),
                place: dataItem[1].value
              }
            })
          },
          {
            name: item[0],
            type: 'lines',
            zlevel: 1,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: 'red', // arrow箭头的颜色
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: '#fff',
                width: 0,
                curveness: 0.2
              }
            },
            tooltip: {
              show: false
            },
            data: convertData(item[1])
          },
          {
            name: item[0],
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'arrow'],
            symbolSize: 10, // 固定箭头大小
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: 'arrow',
              symbolSize: 10 // 动态箭头大小
            },
            lineStyle: {
              normal: {
                color: '#fff',
                width: 1,
                opacity: 0.6,
                curveness: 0.2
              }
            },
            tooltip: {
              show: false
            },
            data: convertData(item[1])
          }
        )
      })

      this.seriesData = series
      const initOption = {
        // {a}<br/>
        // 提示框
        tooltip: {
          trigger: 'item',
          triggerOn: 'click',
          showContent: true, // 是否显示提示框浮层
          alwaysShowContent: true, // 是否一直显示提示框内容
          // hideDelay: 100, // 浮层隐藏的延迟
          enterable: 'mousemove|click',
          padding: [0, 0, 0, 0],
          backgroundColor: null,
          position: function(point, params, dom, rect, size) {
            // console.log('point', point)
            // console.log('params', params)
            // console.log('dom', dom)
            // console.log('rect', rect)
            // console.log('size', size)
            return [point[0] + 14, point[1] - 164]
          },
          formatter: (params, ticket, callback) => {
            if (params.seriesType === 'effectScatter') {
              return `<div class='tooltip-main' >
                        <div class='tooltip-line'></div>
                        <div class='tooltip-content'>
                          <div class='title'>${params.data.name}</div>
                          <div class='place'>地址：${params.data.place}</div>
                        </div>
                      </div>`
            } else if (params.seriesType === 'lines') {
              return (
                params.data.fromName +
                '>' +
                params.data.toName +
                '<br />' +
                params.data.value
              )
            } else {
              return params.name
            }
          }
          // // formatter: '{b}<br/>{c}',
          // // position: 'top'
          // show: true,
          // // 鼠标是否可以进入悬浮框
          // enterable: 'mousemove|click',
          // // 触发方式 mousemove, click, none, mousemove|click
          // triggerOn: 'none',
          // // 浮层隐藏的延迟
          // hideDelay: 100,
          // // 背景色
          // backgroundColor: 'rgba(0,0,0,0)',
          // // 提示框浮层的边框颜色。
          // borderColor: 'rgba(0,0,0,0)',
          // // 位置
          // // position: 'top',
          // position: function(point, params, dom, rect, size) {
          //   console.log('point', point)
          //   console.log('params', params)
          //   console.log('dom', dom)
          //   console.log('rect', rect)
          //   console.log('size', size)
          //   return [point[0] - 100, point[1] - 100]
          // },
          // formatter: function(params) {
          //   return `<div style="padding:20px; background:rgba(0,0,0,.2); border-radius:4px;">
          //           <div class=title>${params.name}</div>
          //           <div>地址：${params.data.place}</div>
          //         </div>`
          // }
        },
        // 设置geo坐标系
        geo: [
          {
            map: 'qiyang',
            aspectScale: 1,
            zoom: 1.1,
            top: '6%', // 距离顶部的位置，每层向下一个百分比
            left: '11%',
            roam: false, // 是否开启平游或缩放
            z: 6, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
            itemStyle: {
              areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0,0,0,.1)'
                }, {
                  offset: 0.8, color: 'rgba(59,143,248,.6)'
                }],
                global: false
              },
              borderColor: '#9ffcff',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(0,0,0,.1)'
                  }, {
                    offset: 0.8, color: 'rgba(59,143,248,.6)'
                  }],
                  global: false
                } // 鼠标移上去时区域的颜色
              }
            },
            label: {
              emphasis: {
                show: false,
                color: '#fff'
              }
            },
            tooltip: {
              show: true
            }
          },
          {
            map: 'qiyang',
            aspectScale: 1,
            zoom: 1.1,
            top: '6%', // 距离顶部的位置，每层向下一个百分比
            left: '11%',
            roam: false, // 是否开启平游或缩放
            z: 5, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
            itemStyle: {
              areaColor: {
                type: 'pattern',
                image: mapImg,
                repeat: 'repeat'
              }, // 每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
              borderColor: '#9ffcff',
              borderWidth: 3,
              shadowColor: '#4cd4eb',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 0,
              emphasis: { // 地图悬停高亮样式
                areaColor: {
                  type: 'pattern',
                  image: mapImg,
                  repeat: 'repeat'
                }
              }
            },
            emphasis: {
              disabled: true,
              areaColor: '#01215c'
            },
            label: {
              emphasis: {
                show: false,
                color: '#fff'
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            map: 'qiyang',
            aspectScale: 1,
            zoom: 1.1,
            top: '7%', // 根据自己需要来设置
            left: '10%',
            roam: false, // 是否开启平游或缩放
            z: 4, // 变小，也就是被压在下面
            itemStyle: {
              areaColor: '#05498f', // 记得改颜色
              borderColor: '#0296cf',
              borderWidth: 2,
              shadowColor: '#0296cf',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 0,
              emphasis: { // 地图悬停高亮样式
                disabled: true,
                areaColor: '#05498f'
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            map: 'qiyang',
            aspectScale: 1,
            zoom: 1.1,
            top: '9%', // 根据自己需要来设置
            left: '9%',
            roam: false,
            z: 3, // 变小，也就是被压在下面
            itemStyle: {
              areaColor: 'rgba(3,106,183,.5)', // 记得改颜色
              borderColor: '#025792',
              borderWidth: 2,
              shadowColor: '#025792',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 0,
              emphasis: { // 地图悬停高亮样式
                areaColor: 'rgba(3,106,183,.5)'
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            map: 'qiyang',
            aspectScale: 1,
            zoom: 1.1,
            top: '11%', // 根据自己需要来设置
            left: '8%',
            roam: false,
            z: 2, // 变小，也就是被压在下面
            itemStyle: {
              areaColor: 'rgba(3,106,183,.2)', // 记得改颜色
              borderColor: '#195175',
              borderWidth: 1,
              shadowColor: '#0f4c74',
              shadowOffsetX: 0,
              shadowOffsetY: 4,
              shadowBlur: 10,
              emphasis: { // 地图悬停高亮样式
                areaColor: 'rgba(3,106,183,.2)'
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            map: 'qiyang',
            aspectScale: 1,
            zoom: 1.1,
            top: '12%', // 根据自己需要来设置
            left: '10%',
            roam: false,
            z: 1, // 变小，也就是被压在下面
            itemStyle: {
              areaColor: 'rgba(0,0,0,.6)', // 记得改颜色
              borderColor: 'rgba(0,0,0,.6)',
              borderWidth: 2,
              shadowColor: 'rgba(0,0,0,.6)',
              shadowOffsetX: 0,
              shadowOffsetY: 4,
              shadowBlur: 10,
              emphasis: { // 地图悬停高亮样式
                areaColor: 'rgba(0,0,0,.6)'
              }
            },
            tooltip: {
              show: false
            }
          }
        ],
        series: series
      }
      setTimeout(() => {
        this.myChart.setOption(initOption)
      }, 200)
    },
    updateChart() {
      // 地图数据
      // const mapData = mapJson.features.map((item) => {
      //   return {
      //     name: item.properties.name,
      //     value: Math.round(Math.random() * 100),
      //     centroid: item.properties.centroid,
      //     adcode: item.properties.adcode
      //   }
      // })
      // 散点数据
      // const scatterData = libJsonData
      // const scatterData = mapData.map((item) => {
      //   return {
      //     name: item.name,
      //     value: item.centroid
      //       ? item.centroid.concat(item.value)
      //       : item.centroid, // [经, 纬度, 值]
      //     itemStyle: {
      //       color: 'red'
      //     }
      //     // adcode: item.adcode,
      //   }
      // })
      // const updateOption = {
      //   series: [
      //     {
      //       data: mapData // type: 'map'
      //     },
      //     {
      //       data: mapData // type: 'map'
      //     },
      //     {
      //       data: scatterData // type: 'effectScatter'
      //     }
      //   ]
      // }

      this.len = this.seriesData[0].data.length // 此处设置的是需要轮播的次数
      console.log('this.len', this.seriesData[0].data)
      // this.myChart.setOption(updateOption)
      this.libIndex = this.count % this.len
      this.libCurrent = this.libInfoData[this.libIndex]
      console.log('this.libIndex', this.libIndex)
      console.log('this.libCurrent', this.libCurrent)
      this.initSwiper()
      this.updatePageWithData()
      this.autohover()
    },
    mouseMove() {
      // 当鼠标移入，终止轮播，高亮显示当前区域
      this.myChart.on('mouseover', (params) => {
        clearInterval(this.timeTicket)
        this.myChart.dispatchAction({
          type: 'downplay'
          // seriesIndex: 0
        })
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
        this.myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
      })
      // 当鼠标移出，轮播继续开始
      this.myChart.on('mouseout', this.autohover)
    },
    autohover() {
      // clearInterval(this.timeTicket)
      // this.timeTicket = setInterval(() => {
      // 1. 取消上次的高亮
      this.myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
      })
      // 2. 显示当前高亮
      this.myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: this.count % this.len
      })
      // 3. 显示提示框中的信息
      this.myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: this.count % this.len
      })
      // }, 2000)
    },
    resize() {
      this.myChart.resize()
    },
    updatePageWithData() {
      // 生成一个随机数来确定要显示的图片数量
      const displayCountOptions = [1, 2, 3, 5]
      const displayCount = displayCountOptions[Math.floor(Math.random() * displayCountOptions.length)]

      // 从 libImg 中随机选择要显示的图片对象
      const shuffledLibImg = this.libImg.slice().sort(() => Math.random() - 0.5) // 随机打乱数组顺序
      this.displayedImages = shuffledLibImg.slice(0, displayCount)

      this.currentIndex = 20
      this.swiperKey += 1

      if (this.displayedImages.length === 1) {
        setTimeout(() => {
          this.count++
          this.libIndex = this.count % this.len
          this.libCurrent = this.libInfoData[this.libIndex]
          console.log('updatePageWithData-libIndex', this.libIndex)
          console.log('updatePageWithData-libCurrent', this.libCurrent)
          this.updatePageWithData()
          this.autohover()
        }, 5000)
      }
    },
    initSwiper() {
      const _self = this
      this.swiperOption = {
        // loop: true,
        // initialSlide: 0,
        notNextTick: false, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        // slidesPerView: 3, // 数量
        // spaceBetween: 30, // 间距
        // slidesPerGroup: 1, // 分几组
        // 禁止滑动
        noSwiping: true,
        observer: true, // 开启动态检查器
        direction: 'horizontal', // 设置水平还是垂直vertical
        // grabCursor: true, //光标样式
        // setWrapperSize: true,
        // autoHeight: true,
        // centeredSlides: true,
        // paginationClickable: true,
        // keyboard: true, //键盘控制
        // mousewheelControl: true, //鼠标轮控制
        autoplay: {
          delay: 3000, // 自动切换的时间间隔，单位ms
          stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
          disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay
          // reverseDirection: false, //开启反向自动轮播
          // waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
        },
        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          type: 'progressbar'
          // progressbarOpposite: true,
          // clickable: true // 允许分页点击跳转
        },
        on: {
          slideChangeTransitionEnd() {
            _self.currentIndex = this.activeIndex
            if (_self.currentIndex === _self.displayedImages.length - 1) {
              setTimeout(() => {
                if (_self.count === _self.libInfoData.length - 1) {
                  _self.count = 0
                  // _self.$parent.autoPagination(3)
                } else {
                  _self.count++
                }
                _self.libIndex = _self.count % _self.len
                _self.libCurrent = _self.libInfoData[_self.libIndex]
                console.log('_self.count', _self.count)
                console.log('_self.libIndex', _self.libIndex)
                console.log('_self.libCurrent', _self.libCurrent)
                _self.updatePageWithData()
                _self.autohover()
                _self.currentIndex = 0
              }, 3000)
            }
          }
        }
      }
    }
  }
}

</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
</style>
<!--
{
  type: 'map',
  map: 'qiyang',
  roam: false,
  silent: true,
  // geoIndex: 0,  geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。
  data: null,
  label: {
    show: false,
    fontSize: 0
  }
},
{
  name: item[0] + ' Top3',
  type: 'lines',
  zlevel: 1,
  effect: {
    show: true,
    period: 6,
    trailLength: 0.7,
    color: 'red', // arrow箭头的颜色
    symbolSize: 3
  },
  lineStyle: {
    normal: {
      color: color[i],
      width: 0,
      curveness: 0.2
    }
  },
  data: convertData(item[1])
},
{
  type: 'effectScatter',
  coordinateSystem: 'geo', // 注意坐标系的设置
  // symbol: 'image://' + require('../../assets/images/default-img.png'),
  data: null,
  symbolSize: [8, 4],
  showEffectOn: 'render',
  rippleEffect: {
    brushType: 'stroke',
    color: '#9ffcff',
    period: 9,
    scale: 5
  },
  label: {
    show: true,
    color: '#FFF',
    formatter: '',
    offset: [0, -12]
  },
  emphasis: {
  // 设置高亮显示的状态
    scale: 8,
    itemStyle: {
      color: 'pink'
    }
  }
} -->