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

@@ -33,16 +33,10 @@ export default {
       type: Boolean,
       default: false,
     },
-    // 是否展示高亮圈圈
     showMarkPoint: {
       type: Boolean,
       default: false,
     },
-    // 是否堆叠展示
-    isHorizontal: {
-      type: Boolean,
-      default: false,
-    },
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -88,7 +82,6 @@ export default {
         Object.assign(option, cloneDeep(props.option));
       } else {
         Object.assign(option, cloneDeep(props.option));
-      }
         let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
         let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
         let seriesData = [];
@@ -116,9 +109,9 @@ export default {
         option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
         if (props.isHorizontal) {
           option.yAxis.data = xAxisData;
-        option.xAxis.data = [];
         } else {
-        option.xAxis.data = xAxisData;
+          option.xAxis.data = [];
+        }
       }
       console.log(option);
       setOptions(option);

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

@@ -11,6 +11,8 @@
 
 .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,15 +16,6 @@ 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: {
@@ -54,10 +45,10 @@ const state = reactive({
       extraCssText: 'backdrop-filter: blur(8px);',
     },
     barStyle: {
-      barWidth: 14,
+      barWidth: 10,
       itemStyle: {
-        borderWidth: 14,
+        borderWidth: 10,
-        borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
+        borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径
       },
       color: {
         type: 'linear',
@@ -95,8 +86,7 @@ const state = reactive({
         show: false,
       },
     },
-    yAxis: [
+    yAxis: {
-      {
       type: 'category',
       data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
       axisTick: {
@@ -109,86 +99,12 @@ const state = reactive({
         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],
-      },
-    ],
     series: [
       {
-        name: '值',
         type: 'bar',
-        zlevel: 1,
+        // barWidth: '40%', // 设置柱的宽度
-        barBorderRadius: 10,
+        // barMinHeight: 2, // 设置柱的最小高度
-        itemStyle: {
+        // barGap: '20%', // 设置柱之间的间隙
-          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',
-          },
-        },
       },
     ],
   },
@@ -232,7 +148,6 @@ const loadData = (val) => {
       }
     }
   }
-  values = getValue(state.data);
   console.log(val);
 };
 </script>

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

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