卫片监管行政区划

src/views/cockpit/wpjg.vue

@@ -21,7 +21,11 @@
         <span class="dvalue">{{ sdata.jcmj || 0 }}%</span>
       </div>
     </div>
-    <div id="wpjg_echart"></div>
+    <div id="wpjg_echart" v-show="false"></div>
+
+    <div id="wpjg_echart_xzqh">
+
+    </div>
   </borderTemplate>
 </template>
 
@@ -43,6 +47,189 @@ export default {
   watch: {},
 
   methods: {
+    init_wpjg_echart_xzqh() {
+
+      var dom = document.getElementById("wpjg_echart_xzqh");
+      var myChart = window.echarts.init(dom);
+      let barTopColor = ["#CBB835", "#33C6E2", '#157FFE', '#8F48F0'];
+      let barBottomColor = ["#D09311", "#279AB0", '#154AD2', '#670BFF'];
+      let option = {
+        backgroundColor: 'rgba(0,0,0,0)',
+        title: {
+          show: false,
+          text: '一行动一活动开展情况',
+          top: 20,
+          left: 'center',
+          textStyle: {
+            color: '#00eaff',
+            fontSize: 18,
+            fontWeight: 'normal'
+          }
+        },
+        tooltip: {
+          show: false,
+          trigger: 'axis',
+          formatter: '一行动一活动开展情况<br>{b}：{c}',
+          backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
+          textStyle: {
+            color: '#fff'
+          },
+          borderColor: "rgba(18, 57, 60, .8)",
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              color: 'rgba(0, 11, 34, .4)',
+            }
+          }
+        },
+        grid: {
+          top: '14%',
+          bottom: '1%',
+          left: '0%',
+          right: '20%',
+          containLabel: true
+        },
+        xAxis: {
+
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#1C82C5'
+            }
+          },
+          axisLabel: {
+            show: false,
+            rotate: 20,
+            margin: 30,
+            textStyle: {
+              fontSize: 14,
+              color: '#DEEBFF',
+              align: 'center'
+            }
+          },
+          interval: 0
+        },
+        yAxis: {
+          data: ['监测图斑', '占用耕地', '占用永久...', '违法占地'],
+
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: 'rgba(28, 130, 197, .3)'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#1C82C5'
+            }
+          },
+          axisLabel: {
+            show: true,
+            margin: 10,
+            textStyle: {
+              fontSize: 12,
+              color: '#DEEBFF',
+            }
+          },
+        },
+
+        series: [
+          {
+            name: '一行动一活动开展情况',
+            type: 'pictorialBar',
+            symbolSize: [8, 14],
+            symbolOffset: [4, 0],
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return barBottomColor[params.dataIndex];
+                }
+              }
+            },
+            label: {
+              textStyle: {
+                rich: {
+                  name: {
+                    color: "#fff", //#BCD3E5
+                    fontSize: 14,
+                  },
+                  value: {
+                    color: "#64DAFF",
+                    fontSize: 14,
+                  },
+                  unit: {
+                    color: "#fff", //#BCD3E5
+                    fontSize: 14,
+                  },
+                },
+              },
+              show: true,
+              position: 'right',
+              fontSize: 16,
+              formatter: function (params) {
+                return `{value|${params.value}}  {unit|㎡}`;
+              }
+            },
+            symbolPosition: 'end',
+            data: [22.23, 23.57, 18.14, 14.75],
+
+          }, {
+            name: '一行动一活动开展情况',
+            type: 'pictorialBar',
+            symbolOffset: [-3, 0],
+
+            symbolSize: [8, 14],
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return barTopColor[params.dataIndex];
+                }
+              }
+            },
+            data: [22, 23, 18, 14],
+
+          }, {
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [{
+                      offset: 1,
+                      color: barTopColor[params.dataIndex]
+                    },
+                    {
+                      offset: 0,
+                      color: barBottomColor[params.dataIndex]
+                    }
+                    ]
+                  );
+                },
+                opacity: .9
+              }
+            },
+            z: 16,
+            silent: true,
+            barWidth: 15,
+            barCategoryGap: '100%',
+            data: [22.23, 23.57, 18.14, 14.75],
+
+          }]
+      };
+
+      myChart.setOption(option);
+
+    },
     init_wpjg_echart() {
       var tdsc_my_chart = window.echarts.init(document.getElementById('wpjg_echart'));
 
@@ -332,6 +519,8 @@ export default {
   mounted() {
     this.$nextTick((res) => {
       this.init_wpjg_echart();
+      this.init_wpjg_echart_xzqh();
+
     })
   },
 };
@@ -376,4 +565,12 @@ export default {
   width: 26rem;
   height: 12rem;
 }
+
+#wpjg_echart_xzqh {
+  left: 1rem;
+  top: 1rem;
+  width: 26rem;
+  height: 12rem;
+
+}
 </style>