From c5d27d1bc2bfb2e7a1e910605b0053f63d72d9bb Mon Sep 17 00:00:00 2001 From: yindongqi Date: Fri, 8 Aug 2025 17:04:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=8F=90=E7=A4=BA=E5=92=8C=E5=B9=B4=E4=BB=BD?= =?UTF-8?q?=E9=80=89=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 重构图表工具提示显示逻辑，支持合并预测值和实际值显示 - 更新默认年份为2024并添加2024选项 - 修复餐饮环节名称错误 - 优化动画关键帧样式 --- src/views/shanghaiStreetMapDasai.vue | 121 +++++++++++++++++++++++---- 1 file changed, 104 insertions(+), 17 deletions(-) diff --git a/src/views/shanghaiStreetMapDasai.vue b/src/views/shanghaiStreetMapDasai.vue index f9c8909..5efe279 100644 --- a/src/views/shanghaiStreetMapDasai.vue +++ b/src/views/shanghaiStreetMapDasai.vue @@ -339,14 +339,11 @@
+ }" v-show="relationShow || isAnimating" style="transform-origin: bottom right;">
@@ -505,10 +502,10 @@ const choujianShow = ref(false); const tousuShow = ref(false); const zhifaShow = ref(false); // -const littlemonth = ref(-1); +const littlemonth = ref(0); // 下拉框"年份"值 -const yearValue = ref("2023"); +const yearValue = ref("2024"); // 下拉框"年份"option const yearOptions = [ { @@ -523,6 +520,10 @@ const yearOptions = [ value: "2023", label: "2023", }, + { + value: "2024", + label: "2024", + }, // 可以根据需要添加更多年份 ]; @@ -3987,7 +3988,7 @@ const choujianEchartsPinfa = () => { showSymbol: true, emphasis: { focus: "series" }, z: 1, - tooltip: { show: false }, // 关键：隐藏虚线的tooltip + // tooltip: { show: false }, // 关键：隐藏虚线的tooltip }, ]) .flat(); @@ -4000,10 +4001,51 @@ const choujianEchartsPinfa = () => { textStyle: { color: "#00ffff", fontSize: 20, fontWeight: "bold" }, top: 5, }, + // tooltip: { + // trigger: "axis", + // // valueFormatter: (v) => (v == null ? "无" : v + "%"), + // valueFormatter: (v) => (v == null ? choujianPinfaData.value[0].prediction + "%" : v + "%"), + // }, tooltip: { - trigger: "axis", - // valueFormatter: (v) => (v == null ? "无" : v + "%"), - valueFormatter: (v) => (v == null ? choujianPinfaData.value[0].prediction + "%" : v + "%"), + trigger: 'axis', + formatter: function (params) { + let ymonth = ""; + let result = ''; + const dataMap = {}; + + // 合并实线和虚线数据 + params.forEach(item => { + // console.log(item); + const isPrediction = item.seriesName.includes('预测'); + const baseName = isPrediction ? item.seriesName.replace('预测', '') : item.seriesName; + + if (!dataMap[baseName]) { + dataMap[baseName] = { value: null, prediction: null }; + } + + if (isPrediction) { + dataMap[baseName].prediction = item.value; + } else { + dataMap[baseName].value = item.value; + } + + ymonth = item.name; + // console.log(ymonth); + }); + + // 构建tooltip内容 + Object.keys(dataMap).forEach(name => { + const item = dataMap[name]; + if (item.prediction && ymonth == "5月") { + result += `${name}: (预测: ${item.prediction}%)`; + } else { + result += `${name}: ${item.value || '0'}%`; + } + result += '
'; + }); + + return result; + }, }, legend: { data: legendData, @@ -4079,7 +4121,7 @@ const zhifaEchartsPinfa = () => { showSymbol: true, emphasis: { focus: "series" }, z: 1, - tooltip: { show: false }, // 关键：隐藏虚线的tooltip + // tooltip: { show: false }, // 关键：隐藏虚线的tooltip }, ]) .flat(); @@ -4092,11 +4134,52 @@ const zhifaEchartsPinfa = () => { textStyle: { color: "#00ffff", fontSize: 20, fontWeight: "bold" }, top: 5, }, - tooltip: { - trigger: "axis", - valueFormatter: (v) => (v == null ? zhifaPinfaData.value[0].prediction + "%" : v + "%"), - // formatter: '{b0}: {c0}
{b1}: {c1}' + // tooltip: { + // trigger: "axis", + // valueFormatter: (v) => (v == null ? zhifaPinfaData.value[0].prediction + "%" : v + "%"), + // // formatter: '{b0}: {c0}
{b1}: {c1}' + // }, + tooltip: { + trigger: 'axis', + formatter: function (params) { + let ymonth = ""; + let result = ''; + const dataMap = {}; + + // 合并实线和虚线数据 + params.forEach(item => { + // console.log(item); + const isPrediction = item.seriesName.includes('预测'); + const baseName = isPrediction ? item.seriesName.replace('预测', '') : item.seriesName; + + if (!dataMap[baseName]) { + dataMap[baseName] = { value: null, prediction: null }; + } + + if (isPrediction) { + dataMap[baseName].prediction = item.value; + } else { + dataMap[baseName].value = item.value; + } + + ymonth = item.name; + // console.log(ymonth); + }); + + // 构建tooltip内容 + Object.keys(dataMap).forEach(name => { + const item = dataMap[name]; + if (ymonth == "5月") { + result += `${name}: (预测: ${item.prediction}%)`; + } else { + result += `${name}: ${item.value || '0'}%`; + } + result += '
'; + }); + + return result; + }, }, legend: { data: legendData, @@ -4149,7 +4232,7 @@ const jubaoGaofaData = ref([ tousulv: "2.04%", dengji: "yellow", }, { - huanjie: "销售环节", + huanjie: "餐饮环节", zhonglei: "虚假宣传", tousulv: "1.97%", dengji: "yellow", @@ -4402,10 +4485,12 @@ const handleFancyClick = (e: MouseEvent) => { opacity: 0; transform: scale(0) translate(0, 0); } + 50% { opacity: 0.8; transform: scale(0.8) translate(0, -20px); } + 100% { opacity: 1; transform: scale(1) translate(0, 0); @@ -4418,10 +4503,12 @@ const handleFancyClick = (e: MouseEvent) => { opacity: 1; transform: scale(1) translate(0, 0); } + 50% { opacity: 0.8; transform: scale(0.8) translate(0, -20px); } + 100% { opacity: 0; transform: scale(0) translate(0, 0);