修改样式

src/views/screen/Dashboard.vue

@@ -136,7 +136,7 @@
               <div class="header-left">
                 <img src="./dashboard/dp_icon4.png" alt="icon" />
                 <span class="header-left-text">乡镇压力【供压、回压】</span>
-                <span class="header-left-text" style="margin-left: 130px;">单位：MPa</span>
+                <span class="header-left-text" style="margin-left: 90px;">单位：MPa</span>
               </div>
             </div>
             <div class=" area-body"></div>
@@ -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, 
+      bottom: 8, 
-      top: 28, 
+      top: 18, 
       containLabel: true 
     },
     tooltip: {
@@ -664,8 +664,8 @@ function updateChartCounty() {
       axisLabel: { 
         color: jbztys.value, 
         interval: 0, 
-        fontSize: 16, // 稍微减小字体以适应更多内容
+        fontSize: 12, // 稍微减小字体以适应更多内容
-        margin: 2 // 减少边距
+        margin: 0 // 减少边距
       },
       axisTick: { show: false },
       axisLine: { show: false }
@@ -691,9 +691,9 @@ function updateChartCounty() {
       // 第一个主体条（供水温度）- 左侧柱子
       { 
         type: 'bar', 
-        barWidth: 10, // 减小宽度
+        barWidth: 8, // 减小宽度
-        barGap: '60%', // 设置柱子间距
+        barGap: '30%', // 设置柱子间距
-        data: values.map((val, index) => ({
+        data: values1.map((val, index) => ({
           value: val,
           itemStyle: {
             color: {
@@ -712,8 +712,8 @@ function updateChartCounty() {
       // 第二个主体条（回水温度）- 右侧柱子
       { 
         type: 'bar', 
-        barWidth: 10, // 减小宽度
+        barWidth: 8, // 减小宽度
-        barGap: '60%', // 设置柱子间距
+        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 的雷达图更新函数