修改集团及基地图表样式

src/views/home/operatingComponents/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.rate}}%</span></span>
+      <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.diff>=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';
@@ -43,18 +49,18 @@ export default {
     }
   },
   methods: {
-getRateFlag(rate, real, target) {
-  if (isNaN(rate) || rate === null || rate === undefined) return 0;
+    getRateFlag(rate, real, target) {
+      if (isNaN(rate) || rate === null || rate === undefined) return 0;
 
-  // 1. 完成率 >= 100 => 达标
-  if (rate >= 100) return 1;
+      // 1. 完成率 >= 100 => 达标
+      if (rate >= 100) return 1;
 
-  // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
-  if (rate === 0 && target === 0) return 1;
+      // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
+      if (rate === 0 && target === 0) return 1;
 
-  // 其他情况 => 未达标
-  return 0;
-},
+      // 其他情况 => 未达标
+      return 0;
+    },
     updateChart() {
       const chartDom = this.$refs[this.refName];
       if (!chartDom) {
@@ -66,6 +72,7 @@ getRateFlag(rate, real, target) {
         this.myChart.dispose();
       }
 
+
       this.myChart = echarts.init(chartDom);
       const diff = this.detailData.diff || 0
       const rate = this.detailData.rate || 0
@@ -92,10 +99,10 @@ getRateFlag(rate, real, target) {
           // }
         },
         grid: {
-          top: 10,
-          bottom: 30,
+          top: 40,
+          bottom: 15,
           right: 80,
-          left: 30,
+          left: 10,
           containLabel: true,
           show: false // 隐藏grid背景，避免干扰
         },
@@ -153,73 +160,7 @@ getRateFlag(rate, real, target) {
               label: {
                 show: true,
                 position: 'right',
-                offset: [0, 25],
-                // 固定label尺寸：68px×20px
-                width: 68,
-                height: 20,
-                // 关键：去掉换行，让文字在一行显示，适配小尺寸
-                formatter: (params) => {
-
-                  // const flags = flags || [];
-                  const currentDiff = diff || 0;
-                  const currentFlag = flagValue || 0;
-                  // console.log('flags[params.dataIndex]', flags);
-
-                  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,
               },
               itemStyle: {
                 color: flagValue === 1
@@ -246,60 +187,7 @@ getRateFlag(rate, real, target) {
               label: {
                 show: true,
                 position: 'right',
-                offset: [0, 25],
-                // 固定label尺寸：68px×20px
-                width: 68,
-                height: 20,
-                // 关键：去掉换行，让文字在一行显示，适配小尺寸
-                formatter: function (params) {
-                  return `{value|完成率}{rate|${rate}%}`;
-                },
-                // 核心样式：匹配CSS需求
-                backgroundColor: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
-                    // { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
-                    // { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
-                    { offset: 0.2, color: '#ffffff' }, // 主体白色
-                    { offset: 1, color: '#ffffff' }
-                  ]
-                },
-                // 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
-                shadowColor: 'rgba(191,203,215,0.5)',
-                shadowBlur: 2,
-                shadowOffsetX: 0,
-                shadowOffsetY: 2,
-                // 圆角：4px
-                borderRadius: 4,
-                // 移除边框
-                borderColor: '#BFCBD577',
-                borderWidth: 0,
-                // 文字垂直居中（针对富文本）
-                lineHeight: 20,
-                rich: {
-                  value: {
-                    // 缩小宽度和内边距，适配68px容器
-                    width: 'auto', // 自动宽度，替代固定40px
-                    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: {
                 // 预算的渐变颜色（蓝系渐变）