闲置土地歌区县闲置情况

src/views/Idleland/components/tjzl.vue

@@ -45,9 +45,15 @@ export default {
         { name: "已处置闲置", prop: "ycz" },
       ],
       jdData: {
-        legend_data: ["闲置率", "认定闲置土地", "已处置闲置土地"],
+        legend_data: ["认定闲置土地", "已处置闲置土地", "闲置率", "处置率"],
         x_data: [],
-        line_data: [],
+        legendmap: [
+          { type: "bar" },
+          { type: "bar" },
+          { type: "line", color: "#D9001B" },
+          { type: "line" },
+        ],
+        yAxis: [{ name: "土地面积（亩）" }, { name: "比率（%）" }],
       },
     };
   },
@@ -82,16 +88,16 @@ export default {
     },
     GetQueryList() {
       this.jdData.x_data = [];
-      this.jdData.line_data = [];
-      this.jdData.result = [[], []];
+      this.jdData.result = [[], [], [], []];
       let params = { jscType: `jsc_stxf_ssxf_jdfq`, id: 4602 };
       QueryList(params).then((res) => {
         res.data.forEach((jdData) => {
           let jd = `${(jdData.dj - 1) * 20}-${jdData.dj * 20}`;
           this.jdData.x_data.push(jd);
-          this.jdData.line_data.push(jdData.zlmj);
           this.jdData.result[0].push(jdData.dj_number);
           this.jdData.result[1].push(jdData.tzje);
+          this.jdData.result[2].push(20);
+          this.jdData.result[3].push(30);
           this.$emit("updateParent", "loading", false);
         });
         this.setEchart(this.jdData, 1);

src/views/cockpit/common/ThreeStackedBarAndLine.vue

@@ -94,13 +94,13 @@ export default {
                 }
                 ],
                 yAxis: [{
-                    name: '项目个数/个',
+                    name: obj.yAxis?obj.yAxis[0].name:'项目个数/个',
                     nameTextStyle: {
                         color: "#fff",
                         fontSize: 12,
                         padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
                     },
-                    minInterval: 1, // 设置y轴的最小间隔为1
+                    minInterval:obj.yAxis?undefined: 1, // 设置y轴的最小间隔为1
                     axisLabel: {
                         interval: 0,
                         show: true,
@@ -120,7 +120,7 @@ export default {
                         }
                     },
                 }, {
-                    name: '面积/公顷',
+                    name: obj.yAxis?obj.yAxis[1].name:'面积/公顷',
                     nameTextStyle: {
                         color: "#fff",
                         fontSize: 12,
@@ -145,48 +145,39 @@ export default {
                         }
                     },
                 }],
-                series: [
-                    {
-
-                        name: obj.legend_data[0],
-                        type: 'line',
-                        smooth: true,
-                        itemStyle: {
-                            normal: {
-                                color: '#FFCC64'  // 折线的颜色
-                            }
-                        },
-                        yAxisIndex: 1, // 指定使用第二个Y轴  
-                        data: obj.line_data,
-                    }
-                    , {
-                        name: obj.legend_data[1],
-                        type: 'bar',
-                        stack: '渠道1',
-                        barWidth: 14,
-
-                        data: obj.result[0],
-                    },
-                    {
-                        name: obj.legend_data[2],
+                series: [],
+            }
+            if(!obj.legendmap)
+            obj.legendmap = [
+                { type: "line", data: obj.line_data },
+                { type: "bar",  data: obj.result[0] },
+                { type: "bar",  data: obj.result[1] },
+                { type: "bar",  data: obj.result[2] },
+            ];
+            obj.legendmap.forEach( (mapele,i) => {
+        if (mapele.type=='line') {
+          option.series.push({
+            name: obj.legend_data[i],
+            type: 'line',
+            smooth: true,
+            itemStyle: {
+              normal: {
+                color: mapele.color||'#FFCC64'  // 折线的颜色
+              }
+            },
+            yAxisIndex: 1, // 指定使用第二个Y轴
+            data: mapele.data||obj.result[i],
+          });
+        }else{
+            option.series.push({
+                        name: obj.legend_data[i],
                         type: 'bar',
-                        stack: '渠道2',
+                        stack: '渠道'+i,//stack相同上下显示
                         barWidth: 14,
-
-                        data: obj.result[1],
-                    },
-                    {
-                        name: obj.legend_data[3],
-                        barWidth: 14,
-
-                        type: 'bar',
-                        barWidth: 8,
-                        stack: '渠道1',
-                        data: obj.result[2],
-                    },
-                ],
-            }
-
+                        data: mapele.data||obj.result[i],
+        });
+    }   
+});
             this.chart.setOption(option);
 
         },