shuili-vue/src/views/dike/safetyManage/safetyAppraisal/components/statisticsOne.vue

<template>
  <div>
    <div class="content">
      <div ref="barEle" style="width: 100%; height: 100%"></div>
    </div>

    <el-table v-loading="loading" :data="statisticsList">
      <el-table-column
        label="行政划区"
        align="center"
        prop="adcdName"
        min-width="120"
      />
      <el-table-column
        label="堤防任务总数"
        align="center"
        prop="total"
        min-width="120"
      />

      <el-table-column
        label="待填报"
        align="center"
        prop="zeroNum"
        min-width="120"
      />
      <el-table-column
        label="待审核"
        align="center"
        prop="oneNum"
        min-width="120"
      />
      <el-table-column
        label="审核不通过"
        align="center"
        prop="twoNum"
        min-width="120"
      />
      <el-table-column
        label="已完成"
        align="center"
        prop="threeNum"
        min-width="120"
      />
      <el-table-column
        label="完成率"
        align="center"
        prop="rate"
        min-width="120"
      />
    </el-table>
  </div>
</template>
<script>
import { getStatistics, listAqrw } from "@/api/yg/dike/aqrw";
import * as echarts from "echarts";
export default {
  props: ["taskId"],
  data() {
    return {
      loading: false,
      statisticsList: [],
      barChartData: {
        name: [],
        value: [],
      },
    };
  },
  created() {
    this.getList();
  },
  watch: {
    taskId: function (n, o) {
      this.getList();
    },
  },
  methods: {
    getList() {
      this.loading = true;
      getStatistics(this.taskId).then((response) => {
        // console.log(11, response);
        this.statisticsList = response.data;
        this.barChartData.name = response.data?.map((res) => res.adcdName);
        this.barChartData.value = response.data?.map((res) => res.rate);
        this.loading = false;
        this.barInit();
      });
    },
    barInit() {
      let chartDom = this.$refs.barEle;
      let myChart = echarts.init(chartDom);
      let option = {
        title: {
          // text: "World Population",
        },
        color: ["#38A0FF", "#4CCA73", "#FBD437"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // legend: {
        //   orient: "horizontal",
        //   bottom: "2%",
        //   icon: "circle",
        // },
        grid: {
          left: "3%",
          right: "4%",
          top: "10%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            alignWithLabel: true,
          },
          data: this.barChartData.name,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            //网格线
            show: true, //是否显示
            lineStyle: {
              //网格线样式
              // color: "#0735a2", //网格线颜色
              // width: 1, //网格线的加粗程度
              type: "dashed", //网格线类型
            },
          },
          minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
          max: function (value) {
            return value.max + Math.ceil(0.2 * value.max);
          },
          // boundaryGap: [0, 1],
        },

        series: [
          {
            name: "完成率（%）",
            type: "bar",
            data: this.barChartData.value,
            barMaxWidth: "10%",
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: 250px;
  margin-top: 20px;
  // border: 1px solid #000;
  background: #fff;
  // box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
  display: flex;
}
</style>