可视化大屏监控设备

可视化大屏

网站地址：http://jstopo.top

drawEchartsMap(str, mapJson, nameCity) {
			this.isBack = nameCity === "江西省" ? false : true;
			if (this.echartsObj[str]) {
				this.echartsObj[str].clear();
				this.echartsObj[str].dispose();
				this.echartsObj[str] = null;
			}
			this.echartsObj[str] = echarts.init(this.$refs[str]);
			echarts.registerMap("jx", mapJson);
			const mapData = mapJson.features.map((item) => {
				return {
					name: item.properties.name,
					obj: item.properties,
					value: 0,
				};
			});
			let option = {
				title: {
					text: nameCity,
					x: "center",
					y: 20,
					textStyle: { color: "#fff" },
				},
				tooltip: {
					trigger: "item",
					formatter: "{b}<br/>{c}",
				},
				series: {
					name: nameCity,
					type: "map",
					map: "jx",
					roam: true,
					label: {
						show: true,
						color: "#fff",
					},
					itemStyle: {
						borderColor: "#41dbff",
						borderWidth: 3,
						areaColor: "rgba(0,0,0,0.1)",
					},
					data: mapData || [],
				},
			};
			this.echartsObj[str].setOption(option, true);
			this.echartsObj[str].on("click", (e) => {
				console.log("点击所在的地图城市名称：", e.data.obj.adcode);
				this.cityJx.forEach((city) => {
					if (city.adcode === e.data.obj.adcode) {
						this.drawEchartsMap(str, city.dataName, city.name);
					}
				});
			});
		},