<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",
              },
              formatter: function (params) {
                let html = "";
                params.forEach((v) => {
                  html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[v.componentIndex].color
                    };"></span>
                ${v.seriesName}.${v.name}
                <span style="color:blue;font-weight:700;font-size: 18px">${v.value}</span>
                个`;
                });
                return html;
              },
              extraCssText:
                "background: #85a2eb; border-radius: 2;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
            },
            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: "#12ba7d",
                  },
                },
                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>