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" style="background-color:#e9e9e9">
      <el-row class="to-flex">
        <el-card class='to-card' shadow="hover">
          <!-- 标题 -->
          <div class="to-title">
            <img :src="url[0]" class="to-img" />
            <el-text tag="b" class="to-Atext">加油站</el-text>
            <el-text tag="b" class="to-Btext">176</el-text>
            <el-text class="to-Ctext">座</el-text>
          </div>
          <div class="to-content">
            <el-table :data="tableData[0]" style="" :cell-style="cellStyle" :show-header="false"
              :row-style="{ height: '10px' }">
              <el-table-column prop="a" width="90" />
              <el-table-column prop="b" width="50" />
              <el-table-column prop="c" width="80" />
            </el-table>
          </div>
        </el-card>

        <el-card class='to-card' shadow="hover">
          <!-- 标题 -->
          <div class="to-title">
            <img :src="url[1]" class="to-img" />
            <el-text tag="b" class="to-Atext">加油机</el-text>
            <el-text class="to-Btext">532</el-text>
            <el-text class="to-Ctext">台</el-text>
          </div>
          <div class="to-content">
            <el-table :data="tableData[1]" style="" :cell-style="cellStyle" :show-header="false"
              :row-style="{ height: '10px' }">
              <el-table-column prop="a" width="90" :cell-style="{ color: 'red' }" />
              <el-table-column prop="b" width="50" />
              <el-table-column prop="c" width="80" />
            </el-table>
          </div>
        </el-card>

        <el-card class='to-card' shadow="hover">
          <!-- 标题 -->
          <div class="to-title">
            <img :src="url[2]" class="to-img" />
            <el-text tag="b" class="to-Atext">加油枪</el-text>
            <el-text class="to-Btext">1822</el-text>
            <el-text class="to-Ctext">条</el-text>
          </div>
          <div class="to-content">
            <el-table :data="tableData[2]" style="" :cell-style="cellStyle" :show-header="false"
              :row-style="{ height: '10px' }">
              <el-table-column prop="a" width="90" />
              <el-table-column prop="b" width="60" />
              <el-table-column prop="c" width="80" />
            </el-table>
          </div>
        </el-card>
      </el-row>

      <!-- 地图 -->
      <el-card style="height: 100vh;width: 100vw; margin-top: 5px;" shadow="hover">
        <div ref="echartsMapRef" style="height: 65vh;width: 85vw; text-align: center;"></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 class="to-left">
          <div class="range">全国</div>
          <div class="title">油站、油机、油枪综合分布</div>
        </div>
      </el-card>

    </div>
  </div>

</template>

<script setup lang="ts">

import echartsMapList from "./mockData/mock.json"
import { onMounted, reactive, 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 url = [
  '/src/assets/map/address.PNG',
  '/src/assets/map/oilEngine.PNG',
  '/src/assets/map/oilGun.PNG'
]
const tableData = reactive([[{
  a: '校验失败',
  b: '33',
  c: '18.75%'
}, {
  a: '离线',
  b: '5',
  c: '2.84%'
}],
[{
  a: '校验失败',
  b: '50',
  c: '9.40%'
}, {
  a: '离线',
  b: '21',
  c: '3.95%'
}],
[{
  a: '校验失败',
  b: '183',
  c: '10.04%'
}, {
  a: '离线',
  b: '72',
  c: '3.95%'
}]
])

// 表格样式设置
const cellStyle = ((data: any) => {
  if (data.row.a === '校验失败' && data.columnIndex == 0) {
    return { 'text-align': 'right', 'padding': 0, 'font-size': '16px', 'color': 'green' }
  } else if (data.row.a === '离线' && data.columnIndex == 0) {
    return { 'text-align': 'right', 'padding': 0, 'font-size': '16px', 'color': 'red' }
  }
  else {
    return { 'text-align': 'right', 'padding': 0, 'font-size': '16px' }
  }
})

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: ['40%', '60%'],//位置
    // layoutSize: '65%',//大小
    tooltip: {
      trigger: 'item',
      formatter: (params) => params.name
    },
    visualMap: {
      min: 0,
      max: 300,
      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;
    }
  }

  .to-left {
    width: 15%;
    // max-width: 500px;
    height: 25%;
    position: absolute;
    z-index: 999;
    top: 40%;
    left: 10%;
    font-size: 18px;

    .range {
      border: {
        top: 1px solid black;
        bottom: 1px solid black
      }

      text-align: center;
      width: 50px;
      color: rgb(12, 169, 231);
      font-weight: 600;
      transform: skew(-10deg);
      margin-bottom: 5%;
    }

    .title {
      color: #8d8b8b;
    }
  }
}

/** ----- 顶部信息框样式 ----- */
// 去除边框线
::v-deep .el-table--border th.el-table__cell,
::v-deep .el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table--border .el-table__cell {
  border-right: none !important;
}

::v-deep .el-table--group,
.el-table--border {
  border: none !important;
}

::v-deep .el-table .cell {
  padding: 0;
}

.el-table {
  --el-table-border-color: none;
}

.to-card {
  flex: 1;
  text-align: center;
  margin-right: 7px;

  .to-title {
    // width: 85%;
    margin-bottom: 20px
  }

  .to-img {
    width: 50px;
    position: relative;
    top: 15px;

  }

  .to-Atext {
    color: black;
    margin-left: 10px;
    font-size: 18px;
  }

  .to-Btext {
    color: blue;
    margin-left: 10px;
    font-size: 16px;
  }

  .to-Ctext {
    color: #000;
    margin-left: 5px;
    font-size: 16px;
  }

  .to-content {
    margin: auto;
    width: 100%;
  }
}
</style>