shuili-vue/src/views/sluice/safetyManage/safetyAppraisal/components/statisticsThree.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"
        sortable
        prop="total"
        min-width="120"
      />

      <el-table-column
        label="已完成"
        align="center"
        prop="threeNum"
        min-width="120"
      />
      <el-table-column
        label="一级水闸"
        align="center"
        prop="one"
        min-width="120"
      />
      <el-table-column
        label="二级水闸"
        align="center"
        prop="two"
        min-width="120"
      />
      <el-table-column
        label="三级水闸"
        align="center"
        prop="three"
        min-width="120"
      />
    </el-table>
  </div>
</template>
<script>
import { getStatisticsLevel, listAqrw } from "@/api/yg/aqrw";
import * as echarts from "echarts";
export default {
  props: ["taskId"],
  data() {
    return {
      loading: false,
      statisticsList: [],
      barChartData: {
        name: [],
        value1: [],
        value2: [],
        value3: [],
      },
    };
  },
  created() {
    this.getList();
  },
  watch: {
    taskId: function (n, o) {
      this.getList();
    },
  },
  methods: {
    getList() {
      this.loading = true;
      getStatisticsLevel(this.taskId).then((response) => {
        console.log(11, response);
        this.statisticsList = response.data;
        this.barChartData.name = response.data?.map((res) => res.adcdName);
        this.barChartData.value1 = response.data?.map((res) => res.one);
        this.barChartData.value2 = response.data?.map((res) => res.two);
        this.barChartData.value3 = response.data?.map((res) => res.three);
        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%",
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "10%",
          bottom: "15%",
          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.value1,
            barMaxWidth: "10%",
          },
          {
            name: "二级水闸",
            type: "bar",
            data: this.barChartData.value2,
            barMaxWidth: "10%",
          },
          {
            name: "三级水闸",
            type: "bar",
            data: this.barChartData.value3,
            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>