<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: "#16F4D2",
                },
              },
              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: "#C99E68",
                },
              },
              data: newData.lineData,
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>