<template>
  <!-- 柱状图 -->
  <Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart>
</template>

<script>
import Echart from "@/common/echart";
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
          legend: {
            data: ["成功", "失败"],
            icon: "circle",
            textStyle: {
              color: "#B4B4B4",
            },
            top: "10%",
            right: "5%",
          },
          grid: {
            left: "5%",
            right: "8%",
            bottom: "5%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#01F3F5",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#01F3F5",
                fontSize: 12,
              },
            },
          },
          yAxis: {
            type: "category",
            data: newData.category,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#01F3F5",
              },
            },
          },
          series: [
            {
              name: "成功",
              type: "bar",
              stack: "总量",
              barWidth: 10,
              itemStyle: {
                normal: {
                  // 这里设置圆角
                  color: "#16F4D2",
                }
              },
              data: newData.barData,
            },
            {
              name: "失败",
              type: "bar",
              stack: "总量",
              itemStyle: {
                normal: {
                  // 这里设置圆角
                  color: "#C99E68"
                },
              },
              data: newData.lineData,
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>