<template>
  <div class="w-full h-full">
    <div class="c-title">风险辩识</div>
    <div
      ref="barChart"
      id="barChart"
      :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("barChart")
      );
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("barChart"));
      }

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: "category",
          data: this.chartOptions.xData,
          axisLine: {
            lineStyle: {
              color: "#fff", // 设置 y 轴线的颜色为红色
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff", // 设置 y 轴线的颜色为红色
            },
          },
        },
        series: [
          {
            data: this.chartOptions.data,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      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>
