feat: 添加地图过滤

src/views/home/echarts/visitor-map.vue

@@ -1,13 +1,16 @@
 <template>
 	<div class="visitor-trend">
-		<div ref="chartRef" style="width: 100%; min-height: 290px;" class="mt-10"></div>
+		<div ref="chartRef" style="width: 100%; min-height: 290px" class="mt-10"></div>
 		<div style="position: absolute; top: 20px; left: 0">
 			<el-select v-model="selectedMap" style="width: 120px" @change="initChart">
 				<el-option v-for="item in mapOptions" :key="item.value" :label="item.label" :value="item.value" />
 			</el-select>
+			<el-select v-model="classify" class="ml-2" style="width: 160px" @change="initChart">
+				<el-option v-for="item in classifyOptions" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
 		</div>
 		<div style="position: absolute; top: 20px; right: 0">
-				<el-select v-model="value" style="width: 84px" @change="initChart">
+			<el-select v-model="value" style="width: 84px" @change="initChart">
 				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
 			</el-select>
 		</div>
@@ -34,19 +37,58 @@ const mapOptions = [
 	{ value: 'africa', label: '非洲' },
 	{ value: 'oceania', label: '大洋洲' },
 ];
-	const value = ref('7');
-	const options = [
-		{
-			value: '7',
-			label: '7天',
-			selected: true,
-		},
-		{
-			value: '30',
-			label: '30天',
-		},
-	];
 const selectedMap = ref('world');
+const value = ref('7');
+const options = [
+	{
+		value: '7',
+		label: '7天',
+		selected: true,
+	},
+	{
+		value: '30',
+		label: '30天',
+	},
+];
+
+const classify = ref('1');
+const classifyOptions = [
+	{
+		value: '1',
+		label: '访问',
+		selected: true,
+	},
+	{
+		value: '2',
+		label: '访客数',
+		selected: true,
+	},
+	{
+		value: '3',
+		label: '活动',
+		selected: true,
+	},
+	{
+		value: '4',
+		label: '用户管理',
+		selected: true,
+	},
+	{
+		value: '5',
+		label: '平均活动次数',
+		selected: true,
+	},
+	{
+		value: '6',
+		label: '平均网站停留时间',
+		selected: true,
+	},
+	{
+		value: '7',
+		label: '跳出率',
+		selected: true,
+	},
+];
 
 const mapFileMap: Record<string, string> = {
 	world: '/map/custom.geo.json',
@@ -75,15 +117,14 @@ async function initChart() {
 		tooltip: {
 			trigger: 'item',
 			formatter(val: any) {
-                console.log(val)
+				console.log(val);
 				if (!val.data) return;
-                mapOptions.forEach((item) => {
-                    if (item.value === mapKey) {
-                        val.data.name = item.label;
+				mapOptions.forEach((item) => {
+					if (item.value === mapKey) {
+						val.data.name = item.label;
 						console.log(val.data.name);
-						
-                    }
-                });
+					}
+				});
 				return val.name + ': ' + val.data.value;
 			},
 		},
@@ -105,16 +146,16 @@ async function initChart() {
 				zoom: 1.2,
 				itemStyle: {
 					borderWidth: 0.5,
-					borderColor: '#000',
+					borderColor: '#e4e7ed',
 					borderType: 'solid',
 				},
 				emphasis: {
 					label: {
 						show: true,
-						color: '#fff',
+						color: '#21272e',
 					},
 					itemStyle: {
-						areaColor: 'green',
+						areaColor: '#58a0f4',
 					},
 				},
 				data: [