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: {
+      tooltip: {
-      //   trigger: 'axis',
+        trigger: 'axis',
-      //   axisPointer: {
+        axisPointer: {
-      //     type: 'shadow',
+          type: 'shadow',
-      //     label: {
+          label: {
-      //       show: true,
+            show: true,
-      //       backgroundColor: '#333',
+            backgroundColor: '#333',
-      //     },
+          },
-      //   },
+        },
-      // },
+      },
-      // legend: {
+      legend: {
-      //   top: 30,
+        top: 30,
-      // },
+      },
-      // grid: {
+      grid: {
-      //   top: 60,
+        top: 60,
-      // },
+      },
-      // xAxis: {
+      xAxis: {
-      //   type: 'category',
+        type: 'category',
-      //   data: [],
+        data: [],
-      // },
+      },
-      // yAxis: {
+      yAxis: {
-      //   type: 'value',
+        type: 'value',
-      // },
+      },
-      // series: [],
+      series: [],
-      // isHorizontal: {
+      isHorizontal: {
-      //   type: Boolean,
+        type: Boolean,
-      //   default: false,
+        default: false,
-      // },
+      },
     });
 
     watchEffect(() => {
@@ -78,40 +78,38 @@ export default {
     });
 
     function initCharts() {
-      if (props.option && props.option.grid.top == '15%') {
+      if (props.option) {
         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 typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
+      let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
-        let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
+      let seriesData = [];
-        let seriesData = [];
+      typeArr.forEach((type, index) => {
-        typeArr.forEach((type, index) => {
+        const barStyle = props.option?.barStyle ?? {};
-          const barStyle = props.option?.barStyle ?? {};
+        let obj = { name: type, type: props.type, ...barStyle };
-          let obj = { name: type, type: props.type, ...barStyle };
+        let data = [];
-          let data = [];
+        xAxisData.forEach((x) => {
-          xAxisData.forEach((x) => {
+          let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
-            let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
+          if (dataArr && dataArr.length > 0) {
-            if (dataArr && dataArr.length > 0) {
+            data.push(dataArr[0].value);
-              data.push(dataArr[0].value);
+          } else {
-            } else {
+            data.push(null);
-              data.push(null);
-            }
-          });
-          obj['data'] = data;
-          if (props.option?.color) {
-            obj.color = props.option?.color[index];
           }
-          if (props.option.series && props.option.series.length > 0) {
-            obj.stack = props.option.series[index].stack ? props.option.series[index].stack : '';
-          }
-          seriesData.push(obj);
         });
-        option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
+        obj['data'] = data;
-        if (props.isHorizontal) {
+        if (props.option?.color) {
-          option.yAxis.data = xAxisData;
+          obj.color = props.option?.color[index];
-        } else {
-          option.xAxis.data = [];
         }
+        if (props.option.series && props.option.series.length > 0) {
+          obj.stack = props.option.series[index].stack ? props.option.series[index].stack : '';
+        }
+        seriesData.push(obj);
+      });
+      option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
+      if (props.isHorizontal) {
+        option.yAxis.data = xAxisData;
+      } else {
+        option.xAxis.data = [];
       }
       console.log(option);
       setOptions(option);

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

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