Web/admin.ui.plus-master/src/views/admin/visualization/digitalMap/index.vue

<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view to-flex">
      <div ref="echartsMapRef" style="height: 100%;width: 100%;"></div>
      <div class="to-right">
        <h3>国内销售排名Top&nbsp;&nbsp;5</h3>
        <div class="item" v-for="(item,index) in topData" :key="index">
          {{item.name}}:&nbsp;&nbsp;{{item.value}}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import echartsMapList from "./mockData/mock.json"
import {onMounted, ref} from "vue";
import * as echarts from "echarts";
import {allCity} from "/@/views/admin/visualization/digitalMap/mockData/allCity";
import router from "/@/router";

// 定义变量内容
const echartsMapRef = ref<RefType>('')


const mapData = allCity.sort((a, b) => {
  return b.value - a.value
})

const topData= mapData.slice(0, 5)


// 注册中国地图
echarts.registerMap('echartsMapList', echartsMapList)
// 初始化
// option配置







const initEchartsMap = () => {
  const myChart = echarts.init(echartsMapRef.value)
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '国内销售数量',
      left: 'center',
      textStyle: {
        color: '#000'
      }
    },
    // layoutCenter: ['50%', '80%'],//位置
    // layoutSize:'130%',//大小
    tooltip: {
      trigger: 'item',
      formatter: (params) => params.name
    },
    visualMap: {
      min: 0,
      max: 50,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        // color: ['lightskyblue', 'yellow', 'orangered']
        color: ['#aacff9','#75c7f6', '#33a9d6']
      }
    },
    series: [
      {
        name: '国内销售数量',
        type: 'map',
        map: 'echartsMapList',
        label: {
          show: true,
          fontSize:12,
          formatter:(params) => {
            if(params.value){
              return params.name+':'+params.value
            }
            return params.name+':0'
          },
        },
        top:'30%',
        roam:true,
        zoom:1.6,
        scaleLimit: {
          //滚轮缩放的极限控制
          min: 1, //缩放最小大小
        },
        data:mapData,
      }
    ]
  }
  myChart.setOption(option)
  myChart.on('georoam',(params) => {
    if('dy' in params|| 'dx' in params) return
    const myOption = myChart.getOption()
    const myZoom = myOption.series[0].zoom
    if(myZoom > 1.5){
      myOption.series[0].label.fontSize = 20
    }else if(myZoom > 1.1){
      myOption.series[0].label.fontSize = 12
    }else {
      myOption.series[0].label.fontSize = 10
    }
    delete myOption.series[0].top
    delete myOption.series[0].zoom
    myChart.setOption(myOption)
  })
  myChart.on('click', (e) => {
    router.push({path:`/admin/visualization/cityLevelMap/${e.data.code}/${e.data.name}`})
  });
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

onMounted(() => {
  initEchartsMap()
})



</script>

<style scoped lang="scss">
.to-flex {
  position: relative;
  .to-right {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: 999;
    bottom: 0;
    right: 0;
    width: 10%;
    max-width: 300px;
    height: 25%;
    background-color: rgba(0, 234, 255, 0.5);
    color: #000; /* 文本颜色为黑色 */
    h3 {
      text-align: center;
      font-size: 14px;
    }
    .item {
      text-align: center;
      font-size: 12px;
    }
  }
}
</style>