shuili-vue/src/views/dike/safetyManage/declarationManage/examine/components/dataCharts.vue

<template>
  <div class="content" v-loading="loading">
    <div ref="pieEle" style="width: 30%; height: 100%"></div>
    <div ref="barEle" style="width: 70%; height: 100%"></div>
  </div>
</template>
<script>
import { getPie, getHistogram } from "@/api/yg/dike/jbxx";
import * as echarts from "echarts";
export default {
  data() {
    return {
      pieChartData: [],
      selected: {},
      barChartData: [],
      loading: true,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      this.loading = true;
      const res1 = await getPie();
      const res2 = await getHistogram();
      this.pieChartData = [];
      for (let key in res1[0]) {
        this.pieChartData.push({
          value: res1[0][key],
          name: key?.substring(0, 10),
        });
      }
      for (let i = 0; i < this.pieChartData.length; i++) {
        let name = this.pieChartData[i].name;
        this.selected[name] = i < 7; //限制图表中起始显示10个，这里必须保证 name 不为空
      }
      // for (let key in res1[0]) {
      //   this.barChartData.push({ value: res1[0][key], name: key });
      // }
      this.barChartData = res2;
      this.pieInit();
      this.barInit();
      this.loading = false;
      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",
          type: "scroll",
          selected: this.selected,
        },
        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() {
      Object.values(this.barChartData);
      let chartDom = this.$refs.barEle;
      let myChart = echarts.init(chartDom);
      let option = {
        title: {
          // text: "World Population",
        },
        color: ["#38A0FF", "#4CCA73"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          orient: "horizontal",
          bottom: "2%",
          icon: "circle",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "12%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            show: false,
            xAxisIndex: [0],
            start: 0,
            end: 50,
            // textStyle: {
            //   color: "#ccd7d7",
            // },
          },
        ],
        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["1"]),
            barMaxWidth: "10%",
          },
          {
            name: "未登记",
            type: "bar",
            data: Object.values(this.barChartData).map((res) => res["0"]),
            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>