|
|
@@ -0,0 +1,161 @@
|
|
|
+<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>
|
