<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 = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            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: 18,
                label: {
                  show: true,
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value;
                    } else {
                      return '';
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#5fba7d",
                  },
                },
                data: newData.barData,

              },
              {
                name: "失败",
                type: "bar",
                stack: "总量",
                label: {
                  show: true,
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value;
                    } else {
                      return '';
                    }
                  }


                },
                itemStyle: {
                  normal: {
                    // 这里设置圆角
                    color: "#c97168",
                  },
                },
                data: newData.lineData,
              },
            ],
          };
        },
        immediate: true,
        deep: true,
      },
    },
  };
</script>