web-store-retail-h5/pages/mine/globalDistribution/globalDistribution.vue

<template>
	<view class="content">
		<view class="themapdiv">
			<view class="chart pt-10">
				<view id="mapChart2" class="mapChart2"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyMarketColor
	} from "@/config/mine.js";
	import {
		_debounce
	} from "@/config/common.js";
	import axios from "axios";
	export default {
		data() {
			return {
				countryList: [],
				myChart: null,
				chinaCode: "world",
				curMapName: "China", // 当前地图名
				colorList: [],
			}
		},
		onShow() {
			this.getMapData(this.chinaCode);
			window.addEventListener("resize", this.resizeCharts);
		},
		beforeDestroy() {
			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("mapChart2"));
				this.$echarts.registerMap(mapName, mapJSON);
				// 获取颜色列表
				const res = await getMyMarketColor();
				const thecolorJson = res.data;

				// 修改颜色列表
				thecolorJson.forEach((item) => {
					item.itemStyle = {
						normal: {
							areaColor: "#C8161D", // 选中区域的颜色
						},
					};
				});


				this.myChart.setOption({
					series: [{
						type: "map",
						map: mapName,
						roam: false, // 是否开启鼠标缩放和平移漫游
						zoom: 2,
						selectedMode: "false", // 是否允许选中多个区域
						label: {
							show: false, //地图上地区文字的现实
							color: "#a8e6e1",
						},
						zoom: 1, // 设置初始缩放级别
						zoomLimit: {
							// 设置缩放级别的限制范围
							min: 1, // 最小缩放级别
							max: 1, // 最大缩放级别
						},

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

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

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


			},
			initMapData(mapJson) {
				var thecolorJson = this.colorList;
				thecolorJson.map((item) => {
					item.itemStyle = {
						normal: {
							areaColor: "#C8161D", //选中区域的颜色
						},
					};
				});
				let mapData = [];
				for (let i = 0; i < mapJson.features.length; i++) {
					mapData.push({
						name: mapJson.features[i].properties.name
					});
				}
				// console.log("🌈thecolorJson", thecolorJson);
				return thecolorJson;
			},

			// 浏览器窗口大小改变时，重新加载图表以自适应
			resizeCharts: _debounce(function() {
				this.$echarts.init(document.getElementById("mapChart2")).resize();
			}, 500),
			// 获取地图数据
			getMapData(map) {
				axios
					.get(`/static/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
						});
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color: #ffffff;
	height: 100vh;
	.chart{
		 #mapChart2 {
		    width: 100%;
		    height: 580rpx;
		    position: relative;
		  }
	}
	 .themapdiv {
	    width: 100%;
	    background: #ffffff;
	    //   height: 952px;
	    img {
	      width: 100%;
	      height: 100%;
	    }
	  }
}
</style>