三

mh-two-thousand-and-two

2024-04-03 29a02350b873fa6339a7535fa929697fec9a8f84

 pages/characterMap/characterMap.vue

@@ -1,6 +1,7 @@
<template>
   <view>
      <headNav />
      <el-button class="getBack" @click="getBack">返回</el-button>
      <view class="" style="position: relative;">
         <!-- 地图 -->
         <view id="spaceTime" style="height: 90vh;width: 100%;position: relative;"></view>
@@ -23,12 +24,15 @@
            <img style="width: 100%;height: 2rem;"
               src="https://img0.baidu.com/it/u=1845740325,2917001370&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711731600&t=0b208ab46e1d33aa81ac31dd6bf627be"
               alt="" />
            <view class="" style="border: 1px solid ; position: absolute;bottom: 0; width: 80%;left: 10%;">
               <!-- <div style="text-align: center; margin-bottom: 20px;">{{currentYear}}</div>
               <el-slider v-model="sliderValue" :min="1900" :step="10" :max="2000" :show-stops="true"
                  @change="handleSliderChange"></el-slider> -->
                  <input type="range" min="0" max="100" v-model="sliderValue">
            </view>
            <div class="box" style="width: 80%;">
               <span class="span" :style="{'marginLeft': spanML+'rem'}">{{span}}年</span>
               <div class="scales">
                  <view v-for="(item,index) in yearArr" @click="scaleClick(index)" class="scale"
                     :data-index="index"></view>
               </div>
               <div class="MX"></div>
               <div class="cursor" :style="{'marginLeft': cursorML+'rem'}"></div>
            </div>
         </el-dialog>
      </view>
   </view>
@@ -44,23 +48,89 @@
   export default {
      data() {
         return {
            menuNav: true,
            menuNav: false,
            sliderValue: 2024,
            currentYear: 2024,
            sliderValue: 50
            sliderValue: 50,
            MX: document.querySelector(".MX"),
            box: document.querySelector(".box"),
            span: '',
            yearArr: [],
            yearIndex: 0,
            spanML: 0,
            cursorML: -.05
         }
      },

      mounted() {

         // 时空地图
         loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
            this.spaceTime()
         })
         this.$nextTick(() => {
            this.aaa()
         })
      },
      methods: {
         // 返回按钮
         getBack() {
            uni.navigateBack();
         },
         aaa() {
            // 渲染母线
            this.addArr()
         },
         addArr(start = 894, end = 900) {
            for (let i = start; i <= end; i++) {
               this.yearArr.push(i)
            }
            this.span = this.yearArr[0]
            this.$nextTick(() => {
               // this.creatMX(this.yearArr.length - 1)
               // this.creatScale(this.yearArr)
            })
         },
         creatMX(len) {
            console.log(len);
            let width = len * 50 + 10
            // this.MX.style.width = `${width}px`
            // this.scales.style.width = `${width}px`
            // console.log(this.box.style.width);
         },
         creatScale() {
            // for (let i = 0; i < this.yearArr.length; i++) {
            //    let scale = document.createElement("div")
            //    scale.className = "scale"
            //    scale.setAttribute("index", i)
            //    scale.addEventListener("click", this.scaleClick)
            //    scales.appendChild(scale)
            // }
            // console.log(arr[0]);

         },

         handleSliderChange(value) {
            this.currentYear = value;
         },
         scaleClick(i) {
            // let i = Number(this.getAttribute("data-index"))
            console.log(i, this.cursorML);

            if (i > this.yearIndex) {

               this.cursorML += (i - this.yearIndex + +('0.0' + this.yearIndex)) / 1.9
               // this.spanML += 50 * (i - this.yearIndex)
               console.log((i - this.yearIndex + 0.2), 'aaaa');

            } else {
               this.cursorML -= (this.yearIndex - i) / 2 + 0.04
               // this.spanML -= 50 * (this.yearIndex - i)
               console.log(this.yearIndex, i, 'bbbb');
            }
            this.yearIndex = i
         },
         // ________________________
         // 时空地图
         spaceTime() {
            var chartDom = document.getElementById('spaceTime');
@@ -100,7 +170,7 @@
                  value: 273
               },
               {
                  name: 'sss大庆',
                  name: '啊三大矿及说到底是封建士大夫大师傅就',
                  value: 279
               }
            ];
@@ -132,7 +202,7 @@
               菏泽: [115.480656, 35.23375],
               合肥: [117.27, 31.86],
               武汉: ['你好', 30.52],
               sss大庆: [125.03, 46.58]
               啊三大矿及说到底是封建士大夫大师傅就: [125.03, 46.58]
            };
            const convertData = function(data) {
               var res = [];
@@ -215,75 +285,153 @@
                     ]
                  }
               },
               series: [
                  {
                     type: 'effectScatter',
                     coordinateSystem: 'bmap',
                     data: convertData(
                        data
                        .sort(function(a, b) {
                           return b.value - a.value;
                        })
                        .slice(0, 6)
                     ),
                     symbolSize: function(val) {
                        return val[2] / 10;
                     },
                     encode: {
                        value: 2
                     },
                     showEffectOn: 'render',
                     rippleEffect: {
                        brushType: 'stroke'
                     },
                     label: {
                        formatter: '{b}',
                        position: 'bottom',
                        backgroundColor: 'rgba(255, 255, 255, 1)',
                        padding: [4, 8],
                        formatter: function(params) { // 使用函数动态生成标签内容
               series: [{
                  type: 'effectScatter',
                  coordinateSystem: 'bmap',
                  data: convertData(
                     data
                     .sort(function(a, b) {
                        return b.value - a.value;
                     })
                     .slice(0, 6)
                  ),
                  symbolSize: function(val) {
                     return val[2] / 10;
                  },
                  encode: {
                     value: 2
                  },
                  showEffectOn: 'render',
                  rippleEffect: {
                     brushType: 'stroke'
                  },
                  label: {
                     formatter: '{b}',
                     position: 'bottom',
                     backgroundColor: 'rgba(255, 255, 255, 1)',
                     padding: [4, 8],
                     formatter: function(params) { // 使用函数动态生成标签内容
                        // 设置文字多少个后面显示省略号
                          if (params.data.name.length > 3) {
                            return params.data.name.substring(0, 3) + '...';
                          } else {
                            return params.data.name;
                          }
                        },
                        show: true,
                        fontSize: 12,
                        borderRadius: 30,
                        if (params.data.name.length > 6) {
                           return params.data.name.substring(0, 6) + '...';
                        } else {
                           return params.data.name;
                        }
                     },
                     itemStyle: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                     },
                     emphasis: {
                        scale: true
                     },
                     zlevel: 1
                  }
               ]
                     show: true,
                     fontSize: 12,
                     borderRadius: 30,
                  },
                  itemStyle: {
                     shadowBlur: 10,
                     shadowColor: '#333'
                  },
                  emphasis: {
                     scale: true
                  },
                  zlevel: 1
               }]
            };
            let menuNav1 = this.menuNav
            let menuNav2 = this.menuNav
            // 设置点击事件监听
            myChart.on('click', function(params) {
            myChart.on('click', (params) => {
               // menuNav2 = !menuNav1
               // console.log(menuNav);
               if (params.componentType === 'series') {

                  var dataName = params.data.name; // 获取点击的数据名称
                  var dataValue = params.data.value; // 获取点击的数据值
                  // 在这里可以根据需要处理点击事件，比如弹出对应数据的详细信息等操作
                  console.log('点击了', dataName, '数据，数值为', dataValue);
                  // console.log('点击了', dataName, '数据，数值为', dataValue);
                  // 这里可以编写触发时间获取对应数据信息的逻辑
                  this.spaceTimeArr(params)
               }
            })

            option && myChart.setOption(option);

         },

         // 时空地图点击时获取的数据
         spaceTimeArr(Arr) {
            // 修改 Vue 组件的数据，例如显示菜单导航
            this.menuNav = !this.menuNav
            // 时空地图的数据
            console.log(Arr);
         }
      }
   }
</script>

<style scoped>
   .getBack {
      position: fixed;
      width: .6rem;
      height: .24rem;
      top: 1rem;
      left: .24rem;
      z-index: 99999;
      font-size: .12rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2C2C2C;
      border-color: #9E9E9E;
      border-radius: 0;
      font-weight: 700;
   }

   .box {
      position: absolute;
      bottom: 10%;
      left: 50%;
      height: .3rem;
      transform: translate(-50%, -50%);
   }

   .MX {
      height: 20px;
      background-color: #ccc;
   }

   .scale {
      width: 3px;
      height: 50px;
      background-color: #ccc;
      cursor: pointer;
   }

   .scales {
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   .span {
      font-size: 25px;
      color: rgb(0, 68, 255);
      margin-left: -34px;
   }

   .cursor {
      position: relative;
      width: 25px;
      height: 30px;
      background-color: rgb(0, 68, 255);
      margin-top: 30px;
      margin-left: -12.5px;
   }

   .cursor:before {
      content: "";
      position: absolute;
      top: -20px;
      width: 0;
      height: 0;
      border-left: 13px solid transparent;
      border-right: 13px solid transparent;
      border-bottom: 20px solid rgb(0, 68, 255);
   }

   ::v-deep .particulars {
      position: absolute !important;
      top: 0;
@@ -314,5 +462,4 @@
      position: relative;
      height: 100%;
   }

</style>