zhywpt-sp/subpackage/service/trajectory-map.vue

<template>
	 <view class="charts-box">
		<qiun
		  type="map"
		  :chartData="state.chartData"
		  :opts="state.opts"
		  :canvas2d="true"
		  canvasId="pVNxVgTQDlKlgMCPbMtJrifnZlluhrNf"
		/>
	  </view>
	<view class="describe">
		<view>
			<view class="all">您共到访过<text class="num">{{state.mapArr.length}}</text>个城市</view>
			<view>您的足迹已踏遍{{state.mileages}}的国土超过了{{state.ranking}}%的九州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 {mapData,mapColor} from "@/datas/mapData.js";
	import qiun from "./qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
	const state = reactive({
		mapArr:[],//后端传过来的省
		lastData:[],
		chartData: {},
		opts: {  //["贵州省","海南省"]  #EE6666
			color: ["#1890FF","#1890FF","#1890FF","#1890FF","#1890FF",
			"#1890FF","#1890FF","#1890FF","#1890FF","#1890FF",
			"#1890FF","#1890FF","#1890FF","#1890FF","#1890FF",
			"#1890FF","#1890FF","#1890FF","#1890FF","#1890FF",
			"#1890FF","#1890FF","#1890FF","#1890FF","#1890FF",
			"#1890FF","#1890FF","#1890FF","#1890FF","#1890FF",
			"#1890FF","#1890FF","#1890FF","#1890FF","#1890FF"],
			padding: [0,0,0,0],
			dataLabel: true,
			fontSize:9,
			enableScroll: false,
			extra: {
			  map: {
				active:false,
				border: true,
				borderWidth: 1,
				borderColor: "#666666",
				fillOpacity: 0.6,
				activeBorderColor: "#F04864",
				activeFillColor: "#FACC14",
				activeFillOpacity: 1
			  }
			}
		}
	})
	onLoad((option : any) => {
		getServerData();
		state.mapArr=option.data.split(",");
		state.mileages=option.mileages;
		state.ranking=option.ranking;
		console.log("option",option.data.split(","))
		dealData();
	})
	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);
    }
	const dealData=()=>{
		for(var i=0;i<state.mapArr.length;i++){
			console.log(mapColor[mapData[state.mapArr[i]]])
			state.lastData.push(mapColor[mapData[state.mapArr[i]]])
		}
		console.log("lastData",state.lastData)
		changeColor();
	}
	const changeColor=()=>{
		for(var i=0;i<state.lastData.length;i++){
			state.opts.color[state.lastData[i]]="#EE6666"
		}
		console.log("state.opts.color",state.opts.color)
	}
</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>