<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',
          },
          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: 'line',
              smooth: true,
              data: newData.yAxis,
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
