<template>
  <!--登记类型总量柱状图 -->
  <Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class=""></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 = {
            grid: {
              // 让图表占满容器
              top: "20%",
              left: "12%",
              right: "5%",
              bottom: "16%",
            },
            xAxis: {
              data: newData.category,
              axisLabel: {
                show: true,
                color: "#ffff",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: "8",
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(95, 180, 237, 0.32)",
                },
              }
            },
            yAxis: {
              splitLine: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(95, 180, 237, 0.32)",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#ffff",
              },
            },
            series: [
              {
                // 顶部圆片
                type: "pictorialBar",
                animation: false,
                itemStyle: {
                  color: "rgba(115, 240, 252, 1)",
                },
                symbolRepeat: false,
                symbolSize: [15, 8],
                symbolMargin: 1,
                z: 10,
                data: newData.lineData,
                symbolPosition: "end",
                symbolOffset: [0, -4],
              },
              {
                // 底部圆片
                type: "pictorialBar",
                animation: false,

                itemStyle: {
                  color: "rgba(50, 96, 225, 0.8)",
                },
                symbolRepeat: false,
                symbolSize: [15, 8],
                symbolMargin: 1,
                z: 10,
                data: newData.lineData,
                symbolPosition: "start",
                symbolOffset: [0, 3],
              },
              {
                barWidth: 15,
                animation: false,

                type: "bar",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#ffff",
                  },
                },
                itemStyle: {
                  color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
                    { offset: 0, color: "rgba(82, 180, 249, 1)" },
                  ]),
                },
                data: newData.lineData,
              },
            ],
          }
        },
        immediate: true,
        deep: true,
      },
    },
  };
</script>