产出品管理页面调整

new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue

@@ -33,10 +33,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 是否展示高亮圈圈
     showMarkPoint: {
       type: Boolean,
       default: false,
     },
+    // 是否堆叠展示
+    isHorizontal: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -67,10 +73,6 @@ export default {
         type: 'value',
       },
       series: [],
-      isHorizontal: {
-        type: Boolean,
-        default: false,
-      },
     });
 
     watchEffect(() => {
@@ -108,8 +110,9 @@ export default {
       option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
       if (props.isHorizontal) {
         option.yAxis.data = xAxisData;
-      } else {
         option.xAxis.data = [];
+      } else {
+        option.xAxis.data = xAxisData;
       }
       console.log(option);
       setOptions(option);

new-digital-agriculture-screen/src/styles/common/define.scss

@@ -11,8 +11,6 @@
 
 .custom-tooltip-container{
   border-radius: 8px !important;
-  padding: 6px 16px 6px 8px !important;
-  background-color: rgba(0,0,0,0.7) !important;
   backdrop-filter: blur(8px) !important;
   & span{
     width: 8px !important;

new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue

@@ -16,6 +16,15 @@ const props = defineProps({
   },
 });
 
+let values = reactive([]);
+const getValue = (dataList) => {
+  let arr = [];
+  for (let i = 0; i < dataList.length; i++) {
+    arr.push(dataList[i].value);
+  }
+  return arr;
+};
+
 const state = reactive({
   data: [],
   option: {
@@ -45,10 +54,10 @@ const state = reactive({
       extraCssText: 'backdrop-filter: blur(8px);',
     },
     barStyle: {
-      barWidth: 10,
+      barWidth: 14,
       itemStyle: {
-        borderWidth: 10,
-        borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径
+        borderWidth: 14,
+        borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
       },
       color: {
         type: 'linear',
@@ -86,25 +95,100 @@ const state = reactive({
         show: false,
       },
     },
-    yAxis: {
-      type: 'category',
-      data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
-      axisTick: {
-        show: false,
+    yAxis: [
+      {
+        type: 'category',
+        data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
       },
-      splitLine: {
-        show: false,
+      {
+        // 右侧数量
+        type: 'category',
+        inverse: true,
+        offset: 10,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+          textStyle: {
+            color: '#ffffff',
+            fontSize: '16',
+          },
+          formatter: function (value) {
+            let str = '{title|' + value + '吨}';
+            return str;
+          },
+          rich: {
+            title: {
+              color: '#fff',
+              fontSize: 16,
+            },
+          },
+        },
+        data: [12000, 8000, 6000, 4000, 3500],
       },
-      axisLine: {
-        show: false,
-      },
-    },
+    ],
     series: [
       {
+        name: '值',
         type: 'bar',
-        // barWidth: '40%', // 设置柱的宽度
-        // barMinHeight: 2, // 设置柱的最小高度
-        // barGap: '20%', // 设置柱之间的间隙
+        zlevel: 1,
+        barBorderRadius: 10,
+        itemStyle: {
+          borderRadius: [10, 10, 10, 10],
+          color: 'rgba(100, 200, 255, 0.3)',
+        },
+        backgroundStyle: {
+          color: 'rgba(100, 200, 255, 0.3)',
+          borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致
+        },
+        barWidth: 20,
+        data: values,
+        label: {
+          position: [0, -16],
+          align: 'left',
+          show: true,
+          formatter: (params) => {
+            return params.name;
+          },
+        },
+        barMaxWidth: 40,
+        markLine: {
+          label: {
+            color: '#26a69a',
+          },
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: 20,
+        barGap: '-100%',
+        data: [],
+        barBorderRadius: 30,
+        itemStyle: {
+          normal: {
+            color: 'rgba(105,131,242,.3)',
+            borderRadius: 10,
+          },
+        },
+        label: {
+          show: false,
+        },
+        barMaxWidth: 40,
+        markLine: {
+          label: {
+            color: '#26a69a',
+          },
+        },
       },
     ],
   },
@@ -148,6 +232,7 @@ const loadData = (val) => {
       }
     }
   }
+  values = getValue(state.data);
   console.log(val);
 };
 </script>

new-digital-agriculture-screen/src/views/land/components/landOne.vue

@@ -23,6 +23,7 @@ const state = reactive({
       containLabel: true,
     },
     tooltip: {
+      show: true,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',