地图

pages.json

 						"navigationBarTitleText": "我的通行"
 					}
 				},
-				{
-					"path": "trajectory/trajectory-map",
-					"style": {
-						"navigationBarTitleText": "我的轨迹"
-					}
-				},
 				{
 					"path": "vehicle-information",
 					"style": {
 		{
 			//其他服务模块
 			"root": "subpackage/service",
-			"pages": [{
+			"pages": [
+				{
+					"path": "trajectory-map",
+					"style": {
+						"navigationBarTitleText": "我的轨迹"
+					}
+				},
+				{
 					"path": "remind/remind",
 					"style": {
 						"navigationBarTitleText": "服务提醒",

pages/user/user.vue

 							<text class="val">{{state.monthFlowingVo.num}}次</text>
 						</view>
 					</view>
-					<!-- <view class="detail" @click="$util.navTo('/subpackage/personal-center/trajectory/trajectory', true)">查看通行轨迹</view> -->
-					<view class="detail">查看通行轨迹</view>
+					<view class="detail" @click="$util.navTo('/subpackage/personal-center/trajectory/trajectory', true)">查看通行轨迹</view>
+					<!-- <view class="detail">查看通行轨迹</view> -->
 				</view>
 			</view>
 			<view class="cars box">

subpackage/personal-center/trajectory/index.vue

-<template>
-	111
-</template>
-
-<script>
-</script>
-
-<style>
-</style>

subpackage/personal-center/trajectory/trajectory.vue

 	}
 	const see=()=>{
 		uni.navigateTo({
-			url:"/subpackage/personal-center/trajectory/trajectory-map"
+			url:"/subpackage/service/trajectory-map"
 		})
 	}
 </script>

subpackage/service/trajectory-map.vue

+<template>
+	 <view class="charts-box">
+	  <!-- <qiun-data-charts 
+	      type="map"
+	      :opts="state.opts"
+	      :chartData="state.chartData"
+	    /> -->
+		<qiun
+		  type="map"
+		  :chartData="state.chartData"
+		  :opts="state.opts"
+		  :canvas2d="true"
+		  canvasId="pVNxVgTQDlKlgMCPbMtJrifnZlluhrNf"
+		/>
+	  </view>
+	<view class="describe">
+		<view>
+			<view class="all">您共到访过<text class="num">5</text>个城市</view>
+			<view>您的足迹已踏遍1500%的国土超过了99%的九州ETC用户</view>
+		</view>
+		<image class="car" src="../../../static/image/home-on.png" mode="aspectFit"></image>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { reactive } from "vue";
+	import {request} from "@/utils/network/request.js";
+	import {stringToJson} from "@/utils/network/encryption.js";
+	import { onLoad,onMounted} from "@dcloudio/uni-app";
+	import mapChina from "@/datas/mapChina.json";
+	// import qiun from "/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
+	import qiun from "./qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
+	const state = reactive({
+		chartData: {},
+		opts: {
+			color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+			padding: [0,0,0,0],
+			dataLabel: true,
+			enableScroll: false,
+			extra: {
+			  map: {
+				border: true,
+				borderWidth: 1,
+				borderColor: "#666666",
+				fillOpacity: 0.6,
+				activeBorderColor: "#F04864",
+				activeFillColor: "#FACC14",
+				activeFillOpacity: 1
+			  }
+			}
+		}
+	})
+	onLoad((option : any) => {
+		getServerData();
+	})
+	const getServerData=()=>{
+		console.log("111")
+      //模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+        let res = {series:mapChina.features};
+		console.log("111")
+        state.chartData = JSON.parse(JSON.stringify(res));
+		console.log("state.chartData",state.chartData)
+      }, 500);
+    }
+</script>
+
+<style scoped>
+	 .charts-box {
+	    width: 100%;
+	    height: 300px;
+	  }
+	.describe{
+		display: flex;
+		width: 90%;
+		margin: 20rpx auto;
+		padding: 30rpx 30rpx 60rpx 30rpx;
+		box-sizing: border-box;
+		background-color: #f6f6f6;
+		border-radius: 20rpx;
+		font-size: 30rpx;
+	}
+	.describe>view{
+		flex: 5;
+	}
+	.describe>image{
+		flex: 3;
+	}
+	.car{
+		width: 150rpx;
+		height: 150rpx;
+		display: inline-block;
+	}
+	.all{
+		font-size: 36rpx;
+		margin-bottom: 20rpx;
+		margin-left: 20rpx;
+	}
+	.num{
+		font-size: 38rpx;
+		font-weight: bold;
+	}
+</style>