<template>
  <div>
    <Echart :options="options" id="centreLeft1Chart" height="12vw" 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 = {
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: newData.datate
            },
            yAxis: {
              type: 'value'
            },
            tooltip: {
              trigger: 'axis'
            },
            series: [{
              data: newData.seriesData,
              type: 'line',
              areaStyle: {}
            }]
          };
        },
        immediate: true,
        deep: true
      }
    }
  };
</script>

<style lang="scss" scoped>
  #centreLeft1Chart {
    text-align: center;
  }
</style>
