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: {
+      // 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,38 +78,40 @@ export default {
     });
 
     function initCharts() {
-      if (props.option) {
+      if (props.option && props.option.grid.top == '15%') {
         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 = [];
-      typeArr.forEach((type, index) => {
-        const barStyle = props.option?.barStyle ?? {};
-        let obj = { name: type, type: props.type, ...barStyle };
-        let data = [];
-        xAxisData.forEach((x) => {
-          let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
-          if (dataArr && dataArr.length > 0) {
-            data.push(dataArr[0].value);
-          } else {
-            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;
-      if (props.isHorizontal) {
-        option.yAxis.data = xAxisData;
       } else {
-        option.xAxis.data = [];
+        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 = [];
+        typeArr.forEach((type, index) => {
+          const barStyle = props.option?.barStyle ?? {};
+          let obj = { name: type, type: props.type, ...barStyle };
+          let data = [];
+          xAxisData.forEach((x) => {
+            let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
+            if (dataArr && dataArr.length > 0) {
+              data.push(dataArr[0].value);
+            } else {
+              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;
+        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,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,