yd_qycpfb/jp-mobile/pages/index/factoryindex.vue

<template>
  <view class="page">
    <!-- 1. 顶部标题 -->
    <view class="header">
      <text class="title">盐都区闲置厂房分布</text>
    </view>

    <!-- 2. 轮播图 -->
    <swiper
      class="swiper"
      circular
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="800"
    >
      <swiper-item v-for="(item, index) in picture" :key="index">
        <image :src="item" class="swiper-item" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 3. 地图 -->
    <view class="map-box">
      <canvas
        canvas-id="ydChart"
        id="ydChart"
        class="map-canvas"
      />
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      chart: null,
      /* 轮播图示例，换成你的真实图片即可 */
      picture:["https://ydwqfw.com.cn/yd_qycpfbH5/bg1.jpg",
      "https://ydwqfw.com.cn/yd_qycpfbH5/bg2.jpg",
      "https://ydwqfw.com.cn/yd_qycpfbH5/bg3.jpg",
      "https://ydwqfw.com.cn/yd_qycpfbH5/bg4.jpg"],
    }
  },
  async onReady() {
    const json = await this.loadGeoJSON()
    echarts.registerMap('yanduqu', json)

    let canvasNode
    // #ifdef H5
    canvasNode = document.getElementById('ydChart')
    // #endif
    // #ifndef H5
    canvasNode = await new Promise(resolve => {
      uni.createSelectorQuery()
        .in(this)
        .select('#ydChart')
        .node(res => resolve(res.node))
        .exec()
    })
    // #endif

    this.chart = echarts.init(canvasNode, null, {
      width : uni.getSystemInfoSync().windowWidth,
      height: uni.getSystemInfoSync().windowHeight * 0.6   // 地图占屏幕 50%
    })
    this.renderMap()
  },
  methods: {
    loadGeoJSON() {
      return new Promise((resolve, reject) => {
        uni.request({
          url: './static/yandu.json',
          method: 'GET',
          success: res => resolve(res.data),
          fail: reject
        })
      })
    },
    renderMap() {
      const option = {
         geo: [{
              map: 'yanduqu',
              roam: false,
              aspectScale: 1.2,
              zoom: 1.1,
              itemStyle: {
                areaColor: '#4ea397',
                borderColor: '#fff',
                borderWidth: 1
              },
              emphasis: {
                itemStyle: { areaColor: '#ffca28' }
              },
              // 关键：打开标签
              label: {
                show: true,          // 默认显示名称
                color: '#fff',       // 文字颜色
                fontSize: 14,        // 字号
                fontWeight: 'bold',
                textBorderColor: 'rgba(85, 85, 255, 0.7)', // 描边让字更清晰
                textBorderWidth: 2
              }
            }],
            series: [{ type: 'map', geoIndex: 0, data: [] }]
      }
      this.chart.setOption(option)

      this.chart.on('click', params => {
		uni.navigateTo({
			url: `/pages/factoryBuildings/factoryBuildingsList?parkid=${params.name}`
		})
				
      })
    }
  }
}
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
}

/* 顶部标题 */
.header {
  padding: 20rpx 0;
  text-align: center;
  background: #fff;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 轮播图 */
.swiper {
  width: 100%;
  height: 300rpx;
}
.swiper-item {
  width: 100%;
  height: 100%;
}

/* 地图容器 */
.map-box {
  flex: 1;
  width: 100%;
}
.map-canvas {
  width: 100%;
  height: 100%;
}
</style>