<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 = {
          grid: {
            // 让图表占满容器
            top: "20%",
            left: "18%",
            right: "10%",
            bottom: "16%",
          },
          xAxis: {
            data: newData.category,
            axisLabel: {
              show: true,
              color: "#ffff",
            },
            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>