z柱状图

src/components/echarts/bar.vue

@@ -0,0 +1,199 @@
+<template>
+  <div id="bar_echart" ref="echart"></div>
+</template>
+
+<script>
+import { cloneDeep } from "lodash";
+let option = {
+  backgroundColor: "rgba(0,0,0,0)",
+  tooltip: {
+    backgroundColor: "RGBA(20, 106, 178, 0.4)",
+    trigger: "axis",
+    textStyle: {
+      fontSize: 14,
+      color: "#fff",
+    },
+  },
+  grid: {
+    left: "10%",
+    right: "4%",
+    bottom: "5%",
+    top: "20%",
+    containLabel: true,
+  },
+  legend: {
+    data: [], //"收储面积", "收储个数"
+    left: "7%",
+    top: "5%",
+    textStyle: {
+      color: "#666666",
+    },
+    itemWidth: 15,
+    itemHeight: 10,
+    itemGap: 25,
+    show: false,
+  },
+  xAxis: {
+    axisTick: { show: false },
+    axisLine: { lineStyle: { color: "#BCD3E5" } },
+    axisLabel: {
+      textStyle: { fontSize: 12, color: "#BCD3E5" },
+    },
+    axisLabel: {
+      interval: 0,
+      formatter: function (value) {
+        // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
+        if (value.length > 4) {
+          return `${value.slice(0, 4)}...`;
+        } else {
+          return value;
+        }
+      },
+    },
+    data: [],
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: "",
+      nameTextStyle: {
+        color: "#ffffff",
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: "rgba(163, 163, 163, 0.5)",
+          type: "dashed",
+        },
+      },
+      axisLabel: {
+        color: "#A0A4AA",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(65, 97, 128, 0.5)",
+        },
+      },
+    },
+    {
+      // name: obj.yAxis ? obj.yAxis[0].name : "项目个数/个",
+      //       nameTextStyle: {
+      //         color: "#fff",
+      //         fontSize: 12,
+      //         padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
+      //       },
+      type: "value",
+      name: "",
+      nameTextStyle: {
+        color: "#ffffff",
+      },
+      position: "right",
+      axisLine: {
+        lineStyle: {
+          color: "#cdd5e2",
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+        formatter: "{value} %", //右侧Y轴文字显示
+        textStyle: {
+          color: "#666666",
+        },
+      },
+    },
+  ],
+  series: [],
+};
+// 柱体
+let seriesItem = {
+  name: "", //收储面积
+  type: "bar",
+  barWidth: "12px",
+  itemStyle: {
+    normal: {
+      // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //   {
+      //     offset: 0,
+      //     color: "#409EFF",
+      //   },
+      //   {
+      //     offset: 1,
+      //     color: "rgba(24, 253, 255, 0)",
+      //   },
+      // ]),
+    },
+  },
+  data: [],
+};
+let lineItem = {
+  name: "", //收储个数
+  type: "line",
+  smooth: true,
+  itemStyle: {
+    normal: {
+      color: "#FFCC64", // 折线的颜色
+    },
+  },
+  data: [],
+};
+export default {
+  name: "bar_echart",
+  props: {
+    unit: {
+      type: String,
+      default: "km²", //"平方千米",
+    },
+  },
+  components: {},
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  methods: {
+    setOptions(v) {
+      let _this = this;
+      if (!this.myChart) {
+        // var dom = document.getElementById("bar_echart");
+        this.myChart = this.$echarts.init(this.$refs.echart);
+      }
+      option.legend.data = v.legend;
+      option.xAxis.data = v.xData;
+      option.yAxis[0].name = v.yName || "变化面积/km²";
+      option.series = [];
+      v.yData.forEach((item, k) => {
+        let o = cloneDeep(seriesItem); // JSON.parse(JSON.stringify(seriesItem));
+        o.name = v.xData[k];
+        o.data = item;
+        o.stack = v.stack||undefined
+        o. barWidth=v.barWidth|| "12px"
+        // alldata = [...alldata, ...o.data];
+        // if (v.interval) {
+        //   option.xAxis.axisLabel.interval = 0;
+        //   option.xAxis.axisLabel.rotate = 0;
+        // }
+        option.series.push(o);
+      });
+      this.myChart.resize();
+      this.myChart.setOption(option);
+
+      this.myChart.on("click", function (params) {
+        _this.$emit("echartClick", params.name, { color: params.color });
+      });
+    },
+  },
+  mounted() {
+    // this.setOptions();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.bar_echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/pageCode/statistic/progress/index.vue

@@ -1,34 +1,35 @@
 <template>
   <div class="app-container box">
-    <customForm ref="formRef" :model="queryParams" :config="FormConfig">
-      <template #action>
-        <el-button type="primary" icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </template>
-    </customForm>
-    <div class="content gdzlc">
-      <div class="item" v-for="zl in zllist[route.query.type]" :key="zl.name">
-        <div
-          class="icon"
-          :class="(zl.name.match(/\n/g) || []).length == 2 ? 'tree' : ''"
-        >
-          <div v-html="zl.name.replace(/\n/g, '<br>')"></div>
-        </div>
-        <div class="text">
-          <div class="ibolk">
-            <div>{{ zldata[zl.prop] || 0 }}个</div>
-            <div>{{ (zldata[zl.prop1] || 0).toFixed(2) }}亩</div>
+    <div class="box-top">
+      <customForm ref="formRef" :model="queryParams" :config="FormConfig">
+        <template #action>
+          <el-button type="primary" icon="Search" @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </template>
+      </customForm>
+      <div class="content gdzlc">
+        <div class="item" v-for="zl in zllist[route.query.type]" :key="zl.name">
+          <div
+            class="icon"
+            :class="(zl.name.match(/\n/g) || []).length == 2 ? 'tree' : ''"
+          >
+            <div v-html="zl.name.replace(/\n/g, '<br>')"></div>
           </div>
-          <div class="ibolk progrestext" v-if="zl.prop3">
-            <div class="radio">{{ zldata[zl.prop3] || 0 }}%</div>
-            <div class="protitle">完成进度</div>
+          <div class="text">
+            <div class="ibolk">
+              <div>{{ zldata[zl.prop] || 0 }}个</div>
+              <div>{{ (zldata[zl.prop1] || 0).toFixed(2) }}亩</div>
+            </div>
+            <div class="ibolk progrestext" v-if="zl.prop3">
+              <div class="radio">{{ zldata[zl.prop3] || 0 }}%</div>
+              <div class="protitle">完成进度</div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="box-content">
+      <!-- <div class="box-content">
       <div class="num">
         <div class="num-item">
           <div class="num-left"></div>
@@ -38,37 +39,8 @@
             <img src="" />
           </div>
         </div>
-        <div class="num-item">
-          <div class="num-item-title">待办数</div>
-          <div class="num-item-text">
-            {{ numParam.toDoQuantity || 0 }}
-          </div>
-        </div>
-        <div class="num-item">
-          <div class="num-item-title">办结数</div>
-          <div class="num-item-text">
-            {{ numParam.completedQuantity || 0 }}
-          </div>
-        </div>
-        <div class="num-item">
-          <div class="num-item-title">重复反映事项数</div>
-          <div class="num-item-text color1">
-            {{ numParam.repeatReactionNum || 0 }}
-          </div>
-        </div>
-        <div class="num-item">
-          <div class="num-item-title">逾期事项数</div>
-          <div class="num-item-text color2">
-            {{ numParam.overdueNum || 0 }}
-          </div>
-        </div>
-        <div class="num-item">
-          <div class="num-item-title">满意率</div>
-          <div class="num-item-text color3">
-            {{ numParam.satisfactionRate || 0 }}%
-          </div>
-        </div>
       </div>
+    </div> -->
     </div>
 
     <div class="box-left">
@@ -93,6 +65,7 @@
           <el-table-column label="图斑数" header-align="center" />
           <el-table-column label="图斑面积" />
         </el-table>
+        <bar class="pie_echart" ref="echartRef"></bar>
       </div>
     </div>
   </div>
@@ -101,11 +74,26 @@
 <script setup name="Role">
 import customForm from "@/components/custom-form.vue";
 import EchartsMap from "@/components/echarts/EchartsMap.vue";
+import bar from "@/components/echarts/bar.vue";
+import { nextTick } from "vue";
 const route = useRoute();
 const router = useRouter();
 const { proxy } = getCurrentInstance();
 const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
-const numParam = ref({});
+const echartRef = ref();
+const echartsMap = ref();
+const eData = ref({
+  xData: ["2020", "2021", "2022", "2023"],
+  yData: [
+    [-10, 10, 10, 10],
+    [-10, 10, 10, 10],
+    [-10, 10, 10, 10],
+  ],
+  legend: ["未判定", "已判定（拆分前）", "已判定（拆分后）"],
+  yName: "个",
+  stack: "ad",
+  barWidth:'20px'
+});
 const mapGeoJson = ref({
   type: "FeatureCollection",
   features: [
@@ -1004,6 +992,20 @@ function getList() {
   //     loading.value = false;
   //   }
   // );
+  nextTick(() => {
+    // console.log(echartsMap.value, "echartsMap");
+    echartRef.value.setOptions(eData.value);
+  });
+}
+function setLnbh(data) {
+  // this.eData.yName = `变化面积${this.unitList[this.nowunit].unit}`;
+  // this.eData.xData = [];
+  // this.eData.yData = [[]];
+  // data.forEach((res) => {
+  //   this.eData.xData.push(res.year);
+  //   this.eData.yData[0].push(res[this.uprops[this.nowunit]]);
+  // });
+  // this.setEchart(this.eData, 0);
 }
 
 getList();
@@ -1013,15 +1015,20 @@ getList();
   background-size: 100% 100%;
   width: 100%;
   height: 100%;
+  background: #f2f2f2;
+  .box-top {
+    background: #fff;
+    padding: 10px;
+  }
   &-left {
     height: 70vh;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    margin-right: 22px;
-    margin-left: 22px;
+    margin-top: 10px;
     &-content {
-      width: 50%;
+      background: #fff;
+      width: calc(50% - 5px);
       height: 100%;
       z-index: 3;
     }
@@ -1053,7 +1060,8 @@ getList();
       }
     }
     .tree {
-      padding: 5px 10px;
+      padding: 8px 10px;
+      line-height: 18px;
     }
 
     .text {
@@ -1133,5 +1141,11 @@ getList();
     }
   }
 }
+.pie_echart {
+  margin-top: 20px;
+  /* margin-left: 20px; */
+  width: 43vw;
+  height: 30vh;
+}
 </style>