web-retail-h5/pages/mine/myMarket/myMarket.vue

<template>
	<view class="content">
		<view class="themapdiv">
			<view class="my_market">
				<view class="ma_in" style="border-right: 2rpx solid #eeeeee;">
					<view> {{ '全国市场' }}</view>
					<view> {{ marketData.countryNum }}{{ '国家' }}</view>
					<view> {{ marketData.regionNum }}{{ '地区' }}</view>

				</view>
				<view class="ma_in">
					<view>{{ '我的市场' }}</view>
					<view>{{ marketData.myCountryNum }}{{ '国家' }}</view>
					<view>{{ marketData.myRegionNum }}{{ '地区' }}</view>
				</view>
			</view>
			<view class="chart pt-10">
				<view id="mapChart" class="mapChart"></view>
				<view class="mapChoose">
					<view class="mapimg" v-if="userInfo.pkCountry == 1">
						<img class="theimg" v-if="theMapC == 2" @click="chooseMap(1)"
							src="../../../static/images/wordmap.png" alt="" />
						<img class="theimg" v-if="theMapC == 1" @click="chooseMap(2)"
							src='../../../static/images/chinamap.png' alt="" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyMarket
	} from '@/config/mine.js'
	import {
		_debounce
	} from "@/config/common.js";
	import axios from "axios";
	export default {
		data() {
			return {
				userInfo: [],
				countryList: [],
				myChart: null,
				chinaCode: "china",
				curMapName: "china", // 当前地图名
				selectedMaps: [{
						name: "世界",
						code: "world",
					},
					{
						name: "China",
						code: "china",
					},
				],
				theMapC: 2, //1中国2世界
				colorList: [],
				marketData: {},
			}
		},
		onShow() {
			this.theMapC=2
			this.userInfo = uni.getStorageSync('User')
			if (this.userInfo.pkCountry != 1) {
				this.theMapC = 1; //1中国2世界
				this.chinaCode = "world";
				this.curMapName = "world"; // 当前地图名
			}else{
				this.theMapC = 2; //1中国2世界
				this.chinaCode = "china";
				this.curMapName = "china"; // 当前地图名
			}
			this.getMapData(this.chinaCode);
			window.addEventListener("resize", this.resizeCharts);
		},
		methods: {
			// 绘制地图
			async drawMapChart(mapName, mapJSON) {
				if (
					this.myChart != null &&
					this.myChart != "" &&
					this.myChart != undefined
				) {
					this.myChart.dispose();
				}
				this.myChart = this.$echarts.init(document.getElementById("mapChart"));
				this.$echarts.registerMap(mapName, mapJSON);

				// 获取颜色列表
				const res = await getMyMarket();
				this.marketData = res.data;
				res.data.myMarketDetailVOList.forEach((ele) => {
					if (ele != null) {
						ele.name = ele.lightName;
					}
				});
				const thecolorJson = res.data.myMarketDetailVOList.filter(
					(item) => item !== null
				);
				// 修改颜色列表
				thecolorJson.forEach((item) => {
					item.itemStyle = {
						normal: {
							areaColor: "#005BAC", // 选中区域的颜色
						},
					};
				});
				this.myChart.setOption({
					series: [{
						type: "map",
						map: mapName,
						roam: false, // 是否开启鼠标缩放和平移漫游
						zoom: 1,
						selectedMode: "false", // 是否允许选中多个区域
						label: {
							show: false, //地图上地区文字的现实
							color: "#a8e6e1",
						},

						emphasis: {
							label: {
								show: true,
								color: "#ffffff",
							},
						},
						itemStyle: {
							normal: {
								areaColor: "#bae7ff",
								borderColor: "#ffffff",
								borderWidth: 1,
							},
							//鼠标悬浮区域上的背景颜色
							emphasis: {
								show: true,
								areaColor: "#005BAC",
							},
						},
						tooltip: {
							trigger: "item",
							show: true,
							backgroundColor: "transparent",

							textStyle: {
								width: 300,
								height: 300,
							},
						},

						data: thecolorJson, // 使用修改后的颜色列表作为地图数据
					}, ],
				});

				this.myChart.on("click", (params) => {});
			},
			initMapData(mapJson) {
				var thecolorJson = this.colorList;
				thecolorJson.map((item) => {
					item.itemStyle = {
						normal: {
							areaColor: "#005BAC", //选中区域的颜色
						},
					};
				});
				let mapData = [];

				for (let i = 0; i < mapJson.features.length; i++) {
					mapData.push({
						name: mapJson.features[i].properties.name
					});
				}
				return thecolorJson;
			},
			// 地图标题菜单点击
			chooseMap(val) {
				//val==1中国val==2世界
				if (val == 1) {
					this.theMapC = 1;
					this.getMapData("world");
				} else if (val == 2) {
					this.theMapC = 2;
					this.getMapData("china");
				}
			},
			// 浏览器窗口大小改变时，重新加载图表以自适应
			resizeCharts: _debounce(function() {
				this.$echarts.init(document.getElementById("mapChart")).resize();
			}, 500),
			// 获取地图数据
			getMapData(map) {
				axios
					.get(`/static/map/${map}.json`)
					// .get(`/map/${map}.json`)
					.then((res) => {
						if (res.status == 200) {
							const mapJSON = res.data;
							this.drawMapChart(this.curMapName, mapJSON);
						}
					})
					.catch((err) => {
						this.$message({
							message: err,
							type: "error",
							showClose: true
						});
					});
			},
		},
		beforeDestroy() {
			window.addEventListener("resize", this.resizeCharts);
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 22rpx 20rpx;

		.themapdiv {
			background-color: #ffffff;
			border-radius: 20rpx;

			.my_market {
				padding: 48rpx 0 0 0;
				width: 100%;
				display: flex;
				align-items: center;

				.ma_in {
					flex: 1;
					text-align: center;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 54rpx;
				}
			}

			.chart {
				.mapChart{
					width: 100%;
					height: 630rpx;
					position: relative;
				}
				

				.mapChoose {
					position: absolute;
					left: 20rpx;
					top:680rpx;
					color: #eee;

					.mapimg {
						width: 220rpx;
						height: 150rpx;
						border-radius: 20rpx;
						opacity: 1;
						border: 4rpx solid #cccccc;
						cursor: pointer;

						.theimg {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>