修改集团及基地图表样式

src/views/home/netPriceAnalysisComponents/verticalBarChart.vue

@@ -1,5 +1,11 @@
 <template>
-  <div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
+  <div style="width: 100%; height: 210px;position: relative;">
+    <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
+      <span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
+      <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>
+    </div>
+    <div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
+  </div>
 </template>
 <script>
 import * as echarts from 'echarts';
@@ -73,10 +79,10 @@ export default {
           }
         },
         grid: {
-          top: 10,
-          bottom: 30,
+          top: 40,
+          bottom: 15,
           right: 80,
-          left: 30,
+          left: 10,
           containLabel: true,
           show: false
         },
@@ -107,68 +113,7 @@ export default {
                 label: {
                   show: true,
                   position: 'right',
-                  offset: [0, 25],
-                  width: 68,
-                  height: 20,
-                  formatter: (params) => {
-                    const currentDiff = diffValue || 0;
-                    const currentFlag = flagValue || 0;
-
-                    const prefix = currentFlag === 1 ? '+' : '';
-
-                    // 根据标志位选择不同的样式类
-                    if (currentFlag === 1) {
-                      // 达标 - 使用 rate-achieved 样式
-                      return `{achieved|${currentDiff}}{text|差值}`;
-                    } else {
-                      // 未达标 - 使用 rate-unachieved 样式
-                      return `{unachieved|${currentDiff}}{text|差值}`;
-                    }
-                  },
-                  backgroundColor: {
-                    type: 'linear',
-                    x: 0, y: 0, x2: 0, y2: 1,
-                    colorStops: [
-                      { offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
-                      { offset: 0.2, color: '#ffffff' },
-                      { offset: 1, color: '#ffffff' }
-                    ]
-                  },
-                  shadowColor: 'rgba(191,203,215,0.5)',
-                  shadowBlur: 2,
-                  shadowOffsetX: 0,
-                  shadowOffsetY: 2,
-                  borderRadius: 4,
-                  borderColor: '#BFCBD577',
-                  borderWidth: 0,
-                  lineHeight: 20,
-                  rich: {
-                    text: {
-                      width: 'auto',
-                      padding: [5, 10, 5, 0],
-                      align: 'center',
-                      color: '#464646',
-                      fontSize: 11,
-                      lineHeight: 20
-                    },
-                    achieved: {
-                      width: 'auto',
-                      padding: [5, 0, 5, 10],
-                      align: 'center',
-                      color: '#76DABE', // 与达标的 offset: 1 颜色一致
-                      fontSize: 11,
-                      lineHeight: 20
-                    },
-                    // 未达标样式
-                    unachieved: {
-                      width: 'auto',
-                      padding: [5, 0, 5, 10],
-                      align: 'center',
-                      color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
-                      fontSize: 11,
-                      lineHeight: 20
-                    }
-                  }
+                  fontSize: 14
                 },
                 // 修复：flag颜色判断独立绑定到实际值柱子
                 itemStyle: {
@@ -198,30 +143,7 @@ export default {
                 label: {
                   show: true,
                   position: 'right',
-                  offset: [0, 25],
-                  width: 68,
-                  height: 20,
-                  formatter: `{value|完成率}{rate|${rateValue}%}`,
-                  backgroundColor: {
-                    type: 'linear',
-                    x: 0, y: 0, x2: 0, y2: 1,
-                    colorStops: [
-                      { offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
-                      { offset: 0.2, color: '#ffffff' },
-                      { offset: 1, color: '#ffffff' }
-                    ]
-                  },
-                  shadowColor: 'rgba(191,203,215,0.5)',
-                  shadowBlur: 2,
-                  shadowOffsetX: 0,
-                  shadowOffsetY: 2,
-                  borderRadius: 4,
-                  borderWidth: 0,
-                  lineHeight: 20,
-                  rich: {
-                    value: { width: 'auto', padding: [5, 0, 5, 10], align: 'center', color: '#464646', fontSize: 11, lineHeight: 20 },
-                    rate: { width: 'auto', padding: [5, 10, 5, 0], align: 'center', color: '#0B58FF', fontSize: 11, lineHeight: 20 }
-                  }
+                  fontSize: 14
                 },
                 itemStyle: {
                   color: {