<template>
  <div>
    <!-- 柱状图 -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="480px"
      width="100%"
    ></Echart>
  </div>
</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: ["成功", "失败"],
            textStyle: {
              color: "#B4B4B4",
            },
            top: "1%",
            right: "1%",
          },
          grid: {
            left: "5%",
            right: "7%",
            bottom: "10%",
            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,
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#01F3F5",
              },
            },
          },

          series: [
            {
              name: "成功",
              type: "bar",
              stack: "总量",
              barWidth: 20,
              itemStyle: {
                normal: {
                  color: "#6601FF",
                },
              },

              z: 10,
              data: newData.barData,
            },
            {
              name: "失败",
              type: "bar",
              stack: "总量",
              itemStyle: {
                normal: {
                  color: "#00F0FF",
                },
              },
              z: 5,
              data: newData.lineData,
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>