From cfb9f0ab6ca6c59b826307d25751e3e076a92a79 Mon Sep 17 00:00:00 2001
From: yangjun <1173114630@qq.com>
Date: Wed, 29 Oct 2025 11:10:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/screen/Dashboard.vue | 84 ++++++++++------------------------
1 file changed, 24 insertions(+), 60 deletions(-)
diff --git a/src/views/screen/Dashboard.vue b/src/views/screen/Dashboard.vue
index bb36a87..8ccf9d6 100644
--- a/src/views/screen/Dashboard.vue
+++ b/src/views/screen/Dashboard.vue
@@ -136,7 +136,7 @@
@@ -619,16 +619,16 @@ function updateChartCounty() {
if (!chartCounty) return;
const names = countyList.value.map(i => i.raw?.view028 ?? '未知');
- const values = countyList.value.map(i => (i.raw?.view035 ? Number(i.raw.view035) : 0));
+ const values1 = countyList.value.map(i => (i.raw?.view035 ? Number(i.raw.view035) : 0));
const values2 = countyList.value.map(i => (i.raw?.view036 ? Number(i.raw.view036) : 0));
- const maxVal = values.length ? Math.max(...values, ...values2) * 1.15 : 100;
+ const maxVal = values1.length ? Math.max(...values1) : 100;
chartCounty.setOption({
grid: {
left: 10,
right: 120, // 增加右侧空间以容纳两个标签
- bottom: 14,
- top: 28,
+ bottom: 8,
+ top: 18,
containLabel: true
},
tooltip: {
@@ -664,8 +664,8 @@ function updateChartCounty() {
axisLabel: {
color: jbztys.value,
interval: 0,
- fontSize: 16, // 稍微减小字体以适应更多内容
- margin: 2 // 减少边距
+ fontSize: 12, // 稍微减小字体以适应更多内容
+ margin: 0 // 减少边距
},
axisTick: { show: false },
axisLine: { show: false }
@@ -691,9 +691,9 @@ function updateChartCounty() {
// 第一个主体条（供水温度）- 左侧柱子
{
type: 'bar',
- barWidth: 10, // 减小宽度
- barGap: '60%', // 设置柱子间距
- data: values.map((val, index) => ({
+ barWidth: 8, // 减小宽度
+ barGap: '30%', // 设置柱子间距
+ data: values1.map((val, index) => ({
value: val,
itemStyle: {
color: {
@@ -712,8 +712,8 @@ function updateChartCounty() {
// 第二个主体条（回水温度）- 右侧柱子
{
type: 'bar',
- barWidth: 10, // 减小宽度
- barGap: '60%', // 设置柱子间距
+ barWidth: 8, // 减小宽度
+ barGap: '30%', // 设置柱子间距
data: values2.map((val, index) => ({
value: val,
itemStyle: {
@@ -730,14 +730,14 @@ function updateChartCounty() {
z: 3
},
- // 第一个顶部小图片（供水温度）
+ // // 第一个顶部小图片（供水温度）
{
type: 'pictorialBar',
symbol: `image://${lqImg}`,
symbolSize: [25, 25], // 减小图标大小
- symbolOffset: [13, -7], // 向左偏移，放在左侧柱子顶部
+ symbolOffset: [11, -4], // 向左偏移，放在左侧柱子顶部
symbolPosition: 'end',
- data: values,
+ data: values1,
z: 4,
silent: true
},
@@ -747,7 +747,7 @@ function updateChartCounty() {
type: 'pictorialBar',
symbol: `image://${lqImg}`,
symbolSize: [25, 25], // 减小图标大小
- symbolOffset: [13, 9], // 向右偏移，放在右侧柱子顶部
+ symbolOffset: [13, 6], // 向右偏移，放在右侧柱子顶部
symbolPosition: 'end',
data: values2,
z: 5,
@@ -758,20 +758,23 @@ function updateChartCounty() {
{
type: 'bar',
barWidth: 8,
- data: values.map(() => maxVal),
+ data: values1.map(() => maxVal.toFixed(1)),
itemStyle: { color: 'transparent' },
label: {
show: true,
position: 'right',
distance: 40,
- fontSize: 18, // 减小字体大小
+ fontSize: 16, // 减小字体大小
offset: [-20, -20], // 添加偏移量
align: 'left',
color: '#ffffff',
formatter: (params) => {
- const value = values[params.dataIndex];
+ console.log("🚀 ~ updateChartCounty ~ params:", params)
+ const value1 = values1[params.dataIndex];
+ console.log("🚀 ~ updateChartCounty ~ value1:", value1)
const value2 = values2[params.dataIndex];
- return `{icon|} ${value.toFixed(1)} - ${value2.toFixed(2)}`; // 格式化数值
+ console.log("🚀 ~ updateChartCounty ~ value2:", value2)
+ return `{icon|} ${value1.toFixed(1)} - ${value2.toFixed(1)}`; // 格式化数值
},
rich: {
icon: {
@@ -784,55 +787,16 @@ function updateChartCounty() {
}
}
},
- z: 7,
+ z: 6,
silent: true
},
- // 第二个标签（回水温度）- 右侧标签
- // {
- // type: 'bar',
- // barWidth: 8,
- // data: values2.map(() => maxVal),
- // itemStyle: { color: 'transparent' },
- // label: {
- // show: true,
- // position: 'right',
- // distance: 40, // 增加距离，放在更右侧
- // fontSize: 12, // 减小字体大小
- // offset: [0, -20], // 添加偏移量
- // align: 'left',
- // color: '#ffffff',
- // formatter: (params) => {
- // const value = values2[params.dataIndex];
- // return `{icon2|} ${value.toFixed(1)}`; // 格式化数值
- // },
- // rich: {
- // icon2: {
- // width: 12,
- // height: 12,
- // align: 'center',
- // backgroundColor: {
- // image: ljt
- // }
- // }
- // }
- // },
- // z: 7,
- // silent: true
- // }
],
}, true);
// 添加点击事件
chartCounty.off('click');
chartCounty.on('click', function(params) {
- if (params.seriesIndex === 1 || params.seriesIndex === 2) {
- const clickedName = params.name;
- const gsValue = values[params.dataIndex];
- const hsValue = values2[params.dataIndex];
-
- // 这里可以添加你的业务逻辑
- }
});
}
// area-7 的雷达图更新函数
乡镇压力【供压、回压】
- 单位：MPa
+ 单位：MPa