shuili-vue/src/views/sluice/managementGuarantee/standardizationConstruction/dataCharts.vue

<template>
  <div class="content">
<!--    暂无数据-->
    <!-- <div ref="pieEle" style="width: 30%; height: 100%"></div> -->
    <!-- <div ref="barEle" style="width: 100%; height: 100%"></div> -->
    <div ref="barEle" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import { getPie, getHistogram } from "@/api/yg/dike/fzr";
import * as echarts from "echarts";
export default {
  data() {
    return {
      pieChartData: [],
      barChartData: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      // const res1 = await getPie();
      const res2 = await getHistogram();
      // for (let key in res1[0]) {
      //   this.pieChartData.push({ value: res1[0][key], name: key });
      // }

      this.barChartData = {
        "汕头市": {0: "1", 1: "1",2: '1',3:'1',4:"1",5:'1',6:'1',7:'1'},
        "佛山市": {0: "1", 1: "1",2: '1',3:'1',4:"1",5:'1',6:'1',7:'1'},
        "珠海市": {0: "1", 1: "1",2: '1',3:'1',4:"1",5:'1',6:'1',7:'1'},
        "广州市": {0: "1", 1: "1",2: '1',3:'1',4:"1",5:'1',6:'1',7:'1'},
        "中山市": {0: "1", 1: "1",2: '1',3:'1',4:"1",5:'1',6:'1',7:'1'},
      };
      // this.pieInit();
      this.barInit();
      // console.log("pieChartData", this.pieChartData);
      console.log("barChartData", this.barChartData);
    },
    // pieInit() {
    //   let chartDom = this.$refs.pieEle;
    //   let myChart = echarts.init(chartDom);
    //   let option = {
    //     title: {
    //       // text: "Referer of a Website",
    //       // subtext: "Fake Data",
    //       left: "center",
    //     },
    //     color: ["#6DD48C", "#5DB1FF", "#FBD437", "#36CBCB"],
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     legend: {
    //       orient: "horizontal",
    //       bottom: "2%",
    //       icon: "circle",
    //     },
    //     series: [
    //       {
    //         name: "水闸占比",
    //         type: "pie",
    //         radius: "65%",
    //         data: this.pieChartData,
    //         label: {
    //           formatter: (params) => {
    //             // console.log(11, params);
    //             return `${params.name}: ${params.value}`;
    //           },
    //         },
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)",
    //           },
    //         },
    //       },
    //     ],
    //   };

    //   option && myChart.setOption(option);
    //   window.addEventListener("resize", function () {
    //     myChart.resize();
    //   });
    // },
    barInit() {
      let chartDom = this.$refs.barEle;
      let myChart = echarts.init(chartDom);
      let option;
      console.log(9999, this.barChartData);
      // if (Object.keys(this.barChartData).length == 0) {
      //   option = {
      //     title: {
      //       text: "暂无数据~~",
      //       x: "center",
      //       y: "center",
      //       textStyle: {
      //         fontSize: 14,
      //         fontWeight: "normal",
      //       },
      //     },
      //   };
      // } else {
      option = {
        title: {
          // text: "World Population",38A0FF
        },
        color: [
          "#38A0FF",
          "#4CCA73",
          "#FBD437",
          "#e15145",
          "#da8282",
          "#bfc4ad",
          "#8ec996",
          "#c412bb"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          orient: "horizontal",
          bottom: "2%",
          icon: "circle",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "12%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            alignWithLabel: true,
          },
          data: Object.keys(this.barChartData),
        },
        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: Object.values(this.barChartData).map((res) => res["0"]),
            barMaxWidth: "10%",
          },
          {
            name: "分(泄)洪闸",
            type: "bar",
            data: Object.values(this.barChartData).map((res) => res["1"]),
            barMaxWidth: "10%",
          },
          {
            name: "排(退)水闸",
            type: "bar",
            data: Object.values(this.barChartData).map((res) => res["2"]),
            barMaxWidth: "10%",
          },
          {
            name: "引(进)水闸",
            type: "bar",
            data: Object.values(this.barChartData).map((res) => res["3"]),
            barMaxWidth: "10%",
          },
          {
            name: "橡胶坝",
            type: "bar",
            data: Object.values(this.barChartData).map((res) => res["4"]),
            barMaxWidth: "10%",
          },
          {
            name: "档潮闸",
            type: "bar",
            data: Object.values(this.barChartData).map((res) => res["5"]),
            barMaxWidth: "10%",
          }, {
            name: "档潮闸",
            type: "bar",
            data: Object.values(this.barChartData).map((res) => res["5"]),
            barMaxWidth: "10%",
          },
          {
            name: "排(冲)沙闸",
            type: "bar",
            data: Object.values(this.barChartData).map((res) => res["6"]),
            barMaxWidth: "10%",
          },
          {
            name: "船闸",
            type: "bar",
            data: Object.values(this.barChartData).map((res) => res["7"]),
            barMaxWidth: "10%",
          },
        ],
      };
      // }

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