From 4c9fdc87987140e8b2c3f0dfc2f6608cdb6be774 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期三, 21 十月 2026 17:39:24 +0800
Subject: [PATCH] 青岛维护
---
src/views/home/components/MapChart/index.vue | 274 ++++++++++++++++++++++++++++++++----------------------
1 files changed, 163 insertions(+), 111 deletions(-)
diff --git a/src/views/home/components/MapChart/index.vue b/src/views/home/components/MapChart/index.vue
index a1fc886..feedb92 100644
--- a/src/views/home/components/MapChart/index.vue
+++ b/src/views/home/components/MapChart/index.vue
@@ -37,6 +37,33 @@
type: String,
default: "map",
},
+ zoom: {
+ type: Number,
+ default: 1.2,
+ },
+ left: {
+ type: String,
+ default: "8%",
+ },
+ top: {
+ type: String,
+ default: "10%",
+ },
+ // 鍖哄幙鏍囩锛歠ull=鍚嶇О+鏁板�硷紙榛樿锛屾祬鑹查〉鐢級/ name=浠呭悕绉帮紙娣辫壊澶у睆鐢紝缃簬鍖哄幙鍐呴儴閬垮厤閲嶅彔锛�/ none=涓嶆樉绀�
+ labelMode: {
+ type: String,
+ default: "full",
+ },
+ // 鏄惁鍏佽鎷栨嫿缂╂斁鍦板浘
+ roam: {
+ type: Boolean,
+ default: false,
+ },
+ // 娣辫壊澶у睆閰嶈壊锛堣繛缁笎鍙� + 娣辫壊鎻忚竟锛夛紝娴呰壊椤甸粯璁ゅ叧闂�
+ dark: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
return {
@@ -64,40 +91,24 @@
},
resetOption(newData) {
+ const nameMode = this.labelMode === "name";
+ const showLabel = this.labelMode !== "none";
+ const dark = this.dark;
let seriesData = [
- {
- name: "鏉窞甯�",
- },
- {
- name: "瀹佹尝甯�",
- },
- {
- name: "娓╁窞甯�",
- },
- {
- name: "鍢夊叴甯�",
- },
- {
- name: "婀栧窞甯�",
- },
- {
- name: "缁嶅叴甯�",
- },
- {
- name: "閲戝崕甯�",
- },
- {
- name: "琛㈠窞甯�",
- },
- {
- name: "鑸熷北甯�",
- },
- {
- name: "鍙板窞甯�",
- },
- {
- name: "涓芥按甯�",
- },
+ { name: "甯傚崡鍖�" },
+ { name: "甯傚寳鍖�" },
+ { name: "榛勫矝鍖�" },
+ { name: "宕傚北鍖�" },
+ { name: "鏉庢钵鍖�" },
+ { name: "鍩庨槼鍖�" },
+ { name: "鍗冲ⅷ鍖�" },
+ { name: "鑳跺窞甯�" },
+ { name: "骞冲害甯�" },
+ { name: "鑾辫タ甯�" },
+ { name: "涓滄腐鍖�" },
+ { name: "宀氬北鍖�" },
+ { name: "浜旇幉鍘�" },
+ { name: "鑾掑幙" },
];
if (this.chartType == "map") {
let maxValue = 2;
@@ -127,17 +138,20 @@
}
// 璁剧疆鐐圭殑浣嶇疆(缁忕含搴�)
const geoCoordMap = {
- 鏉窞甯�: [120.19, 30.26, 20],
- 瀹佹尝甯�: [121.56, 29.86, 20],
- 娓╁窞甯�: [120.65, 28.01, 20],
- 鍢夊叴甯�: [120.76, 30.77, 20],
- 婀栧窞甯�: [120.1, 30.86, 20],
- 缁嶅叴甯�: [120.58, 30.01, 20],
- 閲戝崕甯�: [119.64, 29.12, 20],
- 琛㈠窞甯�: [118.88, 28.97, 20],
- 鑸熷北甯�: [122.11, 30.07, 20],
- 鍙板窞甯�: [121.03, 29.15, 20],
- 涓芥按甯�: [119.92, 28.45, 20],
+ 甯傚崡鍖�: [120.364533, 36.065674, 20],
+ 甯傚寳鍖�: [120.366891, 36.111867, 20],
+ 榛勫矝鍖�: [119.883281, 35.859051, 20],
+ 宕傚北鍖�: [120.580013, 36.189115, 20],
+ 鏉庢钵鍖�: [120.421969, 36.185575, 20],
+ 鍩庨槼鍖�: [120.32982, 36.274819, 20],
+ 鍗冲ⅷ鍖�: [120.524774, 36.482445, 20],
+ 鑳跺窞甯�: [119.953343, 36.24043, 20],
+ 骞冲害甯�: [119.944487, 36.782164, 20],
+ 鑾辫タ甯�: [120.435764, 36.858461, 20],
+ 涓滄腐鍖�: [119.374789, 35.451344, 20],
+ 宀氬北鍖�: [119.19844, 35.284019, 20],
+ 浜旇幉鍘�: [119.243496, 35.737456, 20],
+ 鑾掑幙: [118.880292, 35.667313, 20],
};
let convertData = function (data) {
@@ -177,43 +191,62 @@
}`;
},
},
- visualMap: {
- min: 0,
- max: 1,
- show: false,
- right:'20%',
- seriesIndex: 0,
- text: ["鏈�楂�", "浣�"],
- textStyle: {
- color: "#fff",
- fontSize: "10",
- },
- inRange: {
- color: [
- "rgba(41,166,206)",
- "rgba(69,117,245)",
- "rgba(255, 69, 0)",
- ], // 鍙栧�艰寖鍥寸殑棰滆壊
- },
- // 棰滆壊
- pieces: [
- { value: 0, color: "rgba(41,166,206, .5)" },
- { value: minValue, color: "rgba(41,166,206, .6)" },
- { min: 0, max: maxValue - 1, color: "rgba(69,117,245, .9)" },
- { value: maxValue, color: "rgba(255, 69, 0,.9)" },
- ],
- show: true,
- backgroundColor:"rgba(255, 255, 255, 0.19)"
- },
+ visualMap: dark
+ ? {
+ type: "continuous",
+ min: 0,
+ max: maxValue,
+ seriesIndex: 0,
+ calculable: true,
+ show: true,
+ left: "3%",
+ bottom: "5%",
+ orient: "vertical",
+ text: ["楂�", "浣�"],
+ textStyle: { color: "#c3cde4", fontSize: 12 },
+ inRange: {
+ color: ["#16325c", "#2f6fb5", "#38a5f8", "#22d3ee"],
+ },
+ itemWidth: 12,
+ itemHeight: 90,
+ }
+ : {
+ min: 0,
+ max: 1,
+ show: false,
+ right: "20%",
+ seriesIndex: 0,
+ text: ["鏈�楂�", "浣�"],
+ textStyle: {
+ color: "#fff",
+ fontSize: "10",
+ },
+ inRange: {
+ color: [
+ "rgba(41,166,206)",
+ "rgba(69,117,245)",
+ "rgba(255, 69, 0)",
+ ], // 鍙栧�艰寖鍥寸殑棰滆壊
+ },
+ // 棰滆壊
+ pieces: [
+ { value: 0, color: "rgba(41,166,206, .5)" },
+ { value: minValue, color: "rgba(41,166,206, .6)" },
+ { min: 0, max: maxValue - 1, color: "rgba(69,117,245, .9)" },
+ { value: maxValue, color: "rgba(255, 69, 0,.9)" },
+ ],
+ show: true,
+ backgroundColor: "rgba(255, 255, 255, 0.19)",
+ },
// 搴曢儴鑳屾櫙
geo: {
show: true,
aspectScale: 0.85, //闀垮姣�
- zoom: 1.2,
- top: "10%",
- left: "8%",
- map: "娴欐睙",
- roam: false,
+ zoom: this.zoom,
+ top: this.top,
+ left: this.left,
+ map: "闈掑矝鏃ョ収",
+ roam: this.roam,
itemStyle: {
normal: {
areaColor: "rgba(0,0,0,0)",
@@ -231,40 +264,57 @@
{
name: "鐩稿叧鎸囨暟",
type: "map",
- aspectScale: 0.85, //闀垮姣�
- zoom: 1.2,
- mapType: "娴欐睙", // 鑷畾涔夋墿灞曞浘琛ㄧ被鍨�
- top: "10%",
- left: "8%",
- itemStyle: {
- normal: {
- color: "red",
- areaColor: "rgba(19,54,162, .5)",
- borderColor: "rgba(0,242,252,.3)",
- borderWidth: 1,
- shadowBlur: 7,
- shadowColor: "#00f2fc",
- },
- emphasis: {
- areaColor: "rgba(255, 249, 133, 0.6)",
- borderColor: "rgba(252, 239, 0, 0.6)",
- borderWidth: 2,
- shadowBlur: 10,
- shadowColor: "#00f2fc",
- },
- },
+ geoIndex: 0,
+ itemStyle: dark
+ ? {
+ normal: {
+ areaColor: "#16325c",
+ borderColor: "rgba(56,165,248,.55)",
+ borderWidth: 1,
+ shadowBlur: 8,
+ shadowColor: "rgba(56,165,248,.5)",
+ },
+ emphasis: {
+ areaColor: "rgba(56,165,248,.6)",
+ borderColor: "#22d3ee",
+ borderWidth: 2,
+ shadowBlur: 12,
+ shadowColor: "#22d3ee",
+ },
+ }
+ : {
+ normal: {
+ color: "red",
+ areaColor: "rgba(19,54,162, .5)",
+ borderColor: "rgba(0,242,252,.3)",
+ borderWidth: 1,
+ shadowBlur: 7,
+ shadowColor: "#00f2fc",
+ },
+ emphasis: {
+ areaColor: "rgba(255, 249, 133, 0.6)",
+ borderColor: "rgba(252, 239, 0, 0.6)",
+ borderWidth: 2,
+ shadowBlur: 10,
+ shadowColor: "#00f2fc",
+ },
+ },
label: {
- show: true,
- formatter: (params) =>
- `${params.name},${params.value},${
+ show: showLabel,
+ formatter: (params) => {
+ if (nameMode) return params.name;
+ return `${params.name},${params.value},${
params.data.elseData ? params.data.elseData.value2 : ""
- },${params.data.elseData ? params.data.elseData.value3 : ""}`,
-
- position: "right",
- distance: 20,
+ },${params.data.elseData ? params.data.elseData.value3 : ""}`;
+ },
+ position: nameMode ? "inside" : "right",
+ distance: nameMode ? 0 : 20,
textStyle: {
- fontSize: 14,
- color: "#606266",
+ fontSize: nameMode ? 14 : 14,
+ color: nameMode ? "#ffffff" : "#606266",
+ fontWeight: nameMode ? 600 : 400,
+ textBorderColor: nameMode ? "rgba(6,16,34,0.85)" : "transparent",
+ textBorderWidth: nameMode ? 2 : 0,
},
emphasis: {
textStyle: {
@@ -272,9 +322,11 @@
},
},
padding: [4, 4, 4, 4],
- backgroundColor: "rgba(255,255,255,0.6)",
+ backgroundColor: nameMode
+ ? "rgba(0,0,0,0)"
+ : "rgba(255,255,255,0.6)",
borderRadius: 3,
- borderColor: "#DCDFE6",
+ borderColor: nameMode ? "rgba(0,0,0,0)" : "#DCDFE6",
},
data: newData,
universalTransition: true,
@@ -411,7 +463,7 @@
},
// 閲嶆柊闅忔満閫変腑鍦板浘鍖哄煙
reSelectMapRandomArea() {
- const length = 9;
+ const length = 14;
this.$nextTick(() => {
const map = this.$refs.mapChart.chart;
let index = Math.floor(Math.random() * length);
--
Gitblit v1.9.3