<template>
  <div class="w-full h-full">
    <div class="c-title">
      <span>风险辩识</span>
      <span class="ml20">作业单位：1</span>
      <span class="ml10">风险作业：2</span>
    </div>
    <div
      ref="barChart2"
      id="barChart2"
      :style="{ height: height, width: width }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    chartOptions: {
      type: Object,
      default: () => {},
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "200px",
    },
  },
  mounted() {
    this.initEcharts();
  },
  watch: {
    chartOptions: {
      handler(newVal, oldVal) {
        this.initEcharts();
      },
      // 这里的deep是深度监听，因为我们传递过来的是一个对象
      deep: true,
    },
  },
  methods: {
    initEcharts() {
      let myChart = echarts.getInstanceByDom(
        document.getElementById("barChart2")
      );
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("barChart2"));
      }

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "2%", //图表距离容器左侧多少距离
          right: "2%", //图表距离容器右侧侧多少距离
          bottom: "0%", //图表距离容器上面多少距离
          top: "2%", //图表距离容器下面多少距离
          containLabel: true,
        },
        series: [
          {
            type: "pie",
            center: ["50%", "60%"],
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "风险作业" },
              { value: 735, name: "作业单位" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.c-title {
  border-left: 4px solid rgb(64, 158, 255);
  padding-left: 10px;
  color: #fff;
}
</style>
