shuili-vue/src/views/safetyManage/safeProduction/sluice/dataCharts.vue

<template>
  <div class="content">
    <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/yhxx";
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();
      this.pieChartData = [];
      for (let key in res1[0]) {
        this.pieChartData.push({ value: res1[0][key], name: key });
      }
      // for (let key in res1[0]) {
      //   this.barChartData.push({ value: res1[0][key], name: key });
      // }
      this.barChartData = res2;
      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() {
      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,
        },
        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>