xiabin

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

@@ -43,34 +43,34 @@ export default {
     const chartRef = ref(null);
     const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
     let option = reactive({
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-          label: {
-            show: true,
-            backgroundColor: '#333',
-          },
-        },
-      },
-      legend: {
-        top: 30,
-      },
-      grid: {
-        top: 60,
-      },
-      xAxis: {
-        type: 'category',
-        data: [],
-      },
-      yAxis: {
-        type: 'value',
-      },
-      series: [],
-      isHorizontal: {
-        type: Boolean,
-        default: false,
-      },
+      // tooltip: {
+      //   trigger: 'axis',
+      //   axisPointer: {
+      //     type: 'shadow',
+      //     label: {
+      //       show: true,
+      //       backgroundColor: '#333',
+      //     },
+      //   },
+      // },
+      // legend: {
+      //   top: 30,
+      // },
+      // grid: {
+      //   top: 60,
+      // },
+      // xAxis: {
+      //   type: 'category',
+      //   data: [],
+      // },
+      // yAxis: {
+      //   type: 'value',
+      // },
+      // series: [],
+      // isHorizontal: {
+      //   type: Boolean,
+      //   default: false,
+      // },
     });
 
     watchEffect(() => {
@@ -78,9 +78,10 @@ export default {
     });
 
     function initCharts() {
-      if (props.option) {
+      if (props.option && props.option.grid.top == '15%') {
+        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 = [];
@@ -111,6 +112,7 @@ export default {
         } else {
           option.xAxis.data = [];
         }
+      }
       console.log(option);
       setOptions(option);
       startAutoPlay({

new-digital-agriculture-screen/src/views/business/components/businessThere.vue

@@ -72,6 +72,11 @@ const series = types.map((type, idx) => {
       borderRadius: 4,
       formatter: '{@value}万亩',
       z: 100,
+      normal: {
+        show: true,
+        position: 'inside',
+        formatter: '{c}%',
+      },
     },
     emphasis: {
       focus: 'series',
@@ -112,7 +117,7 @@ const state = reactive({
     },
     yAxis: {
       type: 'category', // 分类轴（横向条形图的标签）
-      data: towns, // 分类数据放在 yAxis
+      data: [120, 230, 152, 136, 145, 17], // 分类数据放在 yAxis
       axisTick: { show: false }, // 隐藏刻度线
     },
     color: colors,