<template>
  <div style="width: 100%; height: 100%">
    <Echart :options="options" id="Echart" height="100%" width="100%"></Echart>
  </div>
</template>

<script>
export default {
  name:"saleAmount",
  data() {
    return {
      options: {},
    };
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    cdata: {
      handler(newData) {

        this.options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid:{
            top:'10px',
            bottom:'0px',
            left:'10px',
            right:'10px',
            containLabel:true,
          },
          xAxis: {
            type: "category",
            data: newData.xAxis,
            axisLabel:{
              show:true,
            },
            axisLabel: {
              inside: false,
              color: '#666'
            },
          },
          yAxis: {
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#666",
            },
          },
          dataZoom: [
            {
              type: "inside",
            },
          ],
          series: [
            {
              type: "bar",
              barWidth:"50px",
              itemStyle: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#83bff6" },
                  { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#188df0" },
                ]),
              },
              emphasis: {
                itemStyle: {
                  color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#2378f7" },
                    { offset: 0.7, color: "#2378f7" },
                    { offset: 1, color: "#83bff6" },
                  ]),
                },
              },
              data: newData.yAxis,
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
