feat: 更新图表工具提示和年份选项
- 重构图表工具提示显示逻辑，支持合并预测值和实际值显示 - 更新默认年份为2024并添加2024选项 - 修复餐饮环节名称错误 - 优化动画关键帧样式
This commit is contained in:
parent
f0548cc2bc
commit
c5d27d1bc2
@ -339,14 +339,11 @@
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500 overflow-hidden z-[999] fixed bottom-10 right-7"
|
||||
ref="main9"
|
||||
:class="{
|
||||
ref="main9" :class="{
|
||||
'animate-popup': isAnimating && relationShow,
|
||||
'animate-shrink': isAnimating && !relationShow,
|
||||
'opacity-0 scale-0': !relationShow && !isAnimating
|
||||
}"
|
||||
v-show="relationShow || isAnimating"
|
||||
style="transform-origin: bottom right;">
|
||||
}" v-show="relationShow || isAnimating" style="transform-origin: bottom right;">
|
||||
|
||||
</div>
|
||||
|
||||
@ -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 += '<br/>';
|
||||
});
|
||||
|
||||
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}<br />{b1}: {c1}'
|
||||
// tooltip: {
|
||||
// trigger: "axis",
|
||||
// valueFormatter: (v) => (v == null ? zhifaPinfaData.value[0].prediction + "%" : v + "%"),
|
||||
// // formatter: '{b0}: {c0}<br />{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 += '<br/>';
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user