跟新可视化区域颜色

src/components/baseEcharts/zslyzbEcharts.vue

@@ -38,59 +38,88 @@ let myEchart: EChartsType
 const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
 const myEchartData = () => {
     const option = {
-        angleAxis: {},
         tooltip: {
-            trigger: 'item'
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+            }
         },
-        radiusAxis: {
-            type: 'category',
-            data: ['再生能源占比'],
-            z: 10
+        legend: {
+            data: ['风力', '火力', '光伏', '水力'],
+            textStyle: {
+                color: 'white' // 设置字体颜色为红色
+            }
         },
-        polar: {},
-        series: [
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: [
             {
-                type: 'bar',
-                data: [20],
-                coordinateSystem: 'polar',
-                name: '风力发电',
-                emphasis: {
-                    focus: 'series'
-                }
-            },
+                type: 'category',
+                boundaryGap: false,
+                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+            }
+        ],
+        yAxis: [
             {
-                type: 'bar',
-                data: [10],
-                coordinateSystem: 'polar',
-                name: '光伏发电',
-                emphasis: {
-                    focus: 'series'
-                }
-            }, {
-                type: 'bar',
-                data: [50],
-                coordinateSystem: 'polar',
-                name: '火力发电',
-                emphasis: {
-                    focus: 'series'
-                }
-            }, {
-                type: 'bar',
-                data: [100],
-                coordinateSystem: 'polar',
-                name: '总发电量',
-                emphasis: {
-                    focus: 'series'
-                }
+                type: 'value',
+                min: 0,
+                max: 100
             }
         ],
-        legend: {
-            show: true,
-            data: ['风力发电', '光伏发电', '火力发电', '总发电量'],
-            textStyle: {
-                color: 'white' // 设置字体颜色为红色
+        series: [
+            {
+                name: '风力',
+                type: 'line',
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' %';
+                    }
+                },
+                data: [20, 10, 40, 20, 10, 50, 20, 30, 40, 10, 20, 40]
+            },
+            {
+                name: '火力',
+                type: 'line',
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' %';
+                    }
+                },
+                data: [20, 12, 11, 24, 40, 50, 10, 61, 24, 30, 33, 31]
+            },
+            {
+                name: '光伏',
+                type: 'line',
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' %';
+                    }
+                },
+                data: [10, 32, 21, 54, 40, 30, 40, 11, 24, 20, 30, 30]
+            },
+            {
+                name: '水力',
+                type: 'line',
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' %';
+                    }
+                },
+                data: [12, 32, 21, 34, 40, 30, 20, 31, 34, 50, 30, 10]
             }
-        }
+        ]
     };
     // { notMerge: true } 解决删除数据时,数据不刷新的问题
     myEchart.setOption(option, { notMerge: true })

src/views/visualization/index.vue

@@ -533,7 +533,6 @@ const GDCLData = [{
 }]
 const headactiveTab = ref(0); // 默认激活第一个tab  
 const activeTab = ref(0); // 默认激活第一个tab  
-const jgjkactiveTab = ref(0); // 默认激活第一个tab
 let IMGICon = ALL;
 
 let map = null;
@@ -567,15 +566,19 @@ var yellowLayer = new mapvgl.HeatPointLayer({
 	}
 });
 
+var proname = '湖南省';
+var prokind = 1;
+var dist = null;
+var siqu = ["长沙市", "株洲市", "湘潭市", "衡阳市", "邵阳市", "岳阳市", "常德市", "张家界市", "益阳市", "娄底市", "怀化市", "永州市", "郴州市", "湘西土家族苗族自治州"]
+var zsnyColor = ["#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5", "#2196F3", "#1E88E5", "#1976D2", "#1565C0", "#0D47A1", '#4AD66D', '#6EDE8A', '#92E6A7', '#B7EFC5', '#25A244']
+var qjjcColor = ["#F94144", "#F3722C", "#F8961E", "#F9844A", "#F9C74F", "#90BE6D", "#43AA8B", "#4D908E", "#577590", "#277DA1", "#34A0A4", "#168AAD", "#1A759F", "#1E6091", "#184E77"]
+
 
 const HeadsetActiveTab = (index, value) => {
 	//获取地图上所有的覆盖物
 	var allOverlay = map.getOverlays();
-
-	console.log(111, value, points)
 	let statev = value.type;
 	for (var i = 0; i < allOverlay.length; i++) {
-		console.log(11, allOverlay[i].toString())
 		if (allOverlay[i].toString() == "Marker") {
 			map.removeOverlay(allOverlay[i]);
 		}
@@ -586,12 +589,19 @@ const HeadsetActiveTab = (index, value) => {
 const setActiveTab = (index, value) => {
 	activeTab.value = index;
 	headactiveTab.value = 0;
+	var allOverlay = map.getOverlays();
+	for (var i = 0; i < allOverlay.length; i++) {
+		if (allOverlay[i].toString() == "Polygon") {
+			map.removeOverlay(allOverlay[i]);
+		}
+	}
 	if (value.type === 'B') {
 		addRelitu();
-		getImgType()
-
+		getImgType();
+		addDisXZQY(zsnyColor)
 	} else if (value.type === 'A') {
 		getImgType()
+		addDisXZQY(qjjcColor)
 		whiteLayer.setData([])
 		yellowLayer.setData([])
 	}
@@ -635,8 +645,8 @@ const getImgType = (getImgTypestate = 0) => {
 						aa = "钢铁"
 						break;
 				}
-				var icon = new BMapGL.Icon(IMGICon, new BMapGL.Size(23, 25), {
-					anchor: new BMapGL.Size(10, 25),
+				var icon = new BMapGL.Icon(IMGICon, new BMapGL.Size(15, 15), {
+					anchor: new BMapGL.Size(15, 15),
 				});
 				marker = new BMapGL.Marker(markers, {
 					icon: icon
@@ -648,7 +658,6 @@ const getImgType = (getImgTypestate = 0) => {
 				};
 				// 点标记添加点击事件
 				marker.addEventListener('click', function (e) {
-					// console.log(e, pointsType)
 					map.openInfoWindow(new BMapGL.InfoWindow(
 						"排放总量：" + '1880' + "<br/>" +
 						"类型：" + aa + "<br/>" +
@@ -721,23 +730,23 @@ const createDOM = (config) => {
 // });
 
 // --- 添加行政区 ---
-const addDis = (proname, prokind, dist) => {
-	// map.removeDistrictLayer(dist);
-	dist = new BMapGL.DistrictLayer({
-		name: '(' + proname + ')',
-		kind: prokind,
-		fillColor: '#618bf8',
-		strokeColor: '#daeafa',
-		viewport: true
-	});
-	// --- 行政区划添加鼠标事件 ---
-	dist.addEventListener('mouseover', function (e) {
-		e.currentTarget.setFillColor('#9169db');
-	});
-	dist.addEventListener('mouseout', function (e) {
-		e.currentTarget.setFillColor(e.currentTarget.style.fillColor);
-	});
-	map.addDistrictLayer(dist);
+const addDisXZQY = (color) => {
+	for (var i = 0; i < siqu.length; i++) {
+		dist = new BMapGL.DistrictLayer({
+			name: '(' + siqu[i] + ')',
+			kind: 0,
+			fillColor: color[i],
+			fillOpacity: 0.5
+		});
+		map.addDistrictLayer(dist);
+		// // --- 行政区划添加鼠标事件 ---
+		dist.addEventListener('mouseover', function (e) {
+			e.currentTarget.setFillColor('#9169db');
+		});
+		dist.addEventListener('mouseout', function (e) {
+			e.currentTarget.setFillColor(e.currentTarget.style.fillColor);
+		});
+	}
 }
 
 const addRelitu = () => {
@@ -767,7 +776,6 @@ const addRelitu = () => {
 				}
 			});
 		}
-		// console.log(333, data)
 
 		view.addLayer(yellowLayer);
 		view.addLayer(whiteLayer);
@@ -778,13 +786,10 @@ const addRelitu = () => {
 onMounted(async () => {
 	// 初始化地图
 	map = new BMapGL.Map(mapContainer.value);
-	var point = new BMapGL.Point(116.404, 39.915);
-	// var point = new BMapGL.Point(112.03713729689034, 27.64071783209287);
+	// var point = new BMapGL.Point(116.404, 39.915);
+	var point = new BMapGL.Point(112.03713729689034, 27.64071783209287);
 	var zoomCtrl = new BMapGL.ZoomControl();
-	var proname = '湖南省';
-	var prokind = 1;
-	var dist = null;
-	map.centerAndZoom(point, 7); // 初始化地图,设置中心点坐标和地图级别
+	map.centerAndZoom(point, 8); // 初始化地图,设置中心点坐标和地图级别
 
 	map.enableKeyboard();
 	map.enableScrollWheelZoom(true);
@@ -867,33 +872,40 @@ onMounted(async () => {
 	map.addEventListener("click", function (e) {
 		// getImgType()
 		if (e.overlay) {
-			console.log('你点击的是覆盖物:' + e.overlay.toString());
 		} else {
-			// 点击的是地图本身
-			// map.clearOverlays();
-			var allOverlay = map.getOverlays();
-
-			console.log(111, allOverlay);
-			for (var i = 0; i < allOverlay.length; i++) {
-				console.log(11, allOverlay[i].toString())
-				if (allOverlay[i].toString() == "Polygon") {
-					map.removeOverlay(allOverlay[i]);
-				}
-			}
-
 			var pt = e.latlng; // 获取点击位置的点坐标
 			var geoc = new BMapGL.Geocoder(); // 创建地址解析器实例
 			geoc.getLocation(pt, function (rs) {
 				var addComp = rs.addressComponents; // 获取地址组件信息
+
 				if (addComp.province == "湖南省") {
-					// 显示行政区域名称，例如：省、市、区/县
+					// 点击的是地图本身
+					var allOverlay = map.getOverlays();
+					for (var i = 0; i < allOverlay.length; i++) {
+						if (allOverlay[i].toString() == "Polygon") {
+							map.removeOverlay(allOverlay[i]);
+						}
+					}
+					// 显示行政区域名称，例如：省","市","区/县
 					// var administrativeArea = addComp.province + (addComp.city ? addComp.city :
 					// 	"") + (addComp.district ? addComp.district : "");
-					// console.log("您点击的行政区域是：" + addComp.province);
 					proname = addComp.city;
-					addDis(proname, prokind, dist);
+					let colorThis = '';
+					if(activeTab.value === 0){
+						colorThis = qjjcColor[0]
+					}else{
+						colorThis = zsnyColor[0]
+					}
+					let sdist = new BMapGL.DistrictLayer({
+						name: "(" + proname + ")",
+						kind: prokind,
+						fillColor: colorThis,
+						fillOpacity: 0.5,
+						viewport: true,
+					});
+					map.addDistrictLayer(sdist);
+
 				} else {
-					addDis(proname, prokind, dist);
 					alert("暂无其他省份数据")
 				}
 			});
@@ -901,10 +913,9 @@ onMounted(async () => {
 	});
 	// 导入JSON文件
 	try {
-		addDis(proname, prokind, dist);
+		addDisXZQY(qjjcColor);
 		getImgType()
 	} catch (error) {
-		// console.error('Error loading JSON data:', error);
 	}
 });
 </script>