<template>
  <div>
    <!-- 柱状图 -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="300px"
      width="100%"
    ></Echart>
  </div>
</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: "12%",
        left: "15%",
        right: "10%",
        bottom: "26%",
      },
      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>