<!--
 * @Author: your name
 * @Date: 2021-10-26 13:37:46
 * @LastEditTime: 2021-10-26 14:15:40
 * @LastEditors: Please set LastEditors
 * @Description: 销售分析图
 * @FilePath: \hyyfScreen\src\views\Production\board\ChartSales.vue
-->
<template>
  <div class="sales-chart">
    <div id="salesChart"></div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: "ChartWater",
  data() {
    return {
      myChart: null
    }
  },
  props: {
    id: {
      type: String,
      default: () => '0'
    },
    data: {
      type: Object,
      default: () => {}
    },
    // dataValue: {
    //   type: Array,
    //   default: () => [100, 75, 120, 200, 110, 40, 60]
    // }
  },
  computed: {
    ...mapState(['color'])
  },
  methods: {
    init() {
      let dataAxis = this.data.sellDates
      let start = dataAxis.length - 12;
      let end = dataAxis.length - 1;
      let options = {
        tooltip: {
          trigger: 'axis',
        },
        color: ['#289df5'],
        dataZoom: [{
          type: 'inside',
          startValue: start,
          endValue: end,
          show: false
          // zoomOnMouseWheel: false,
          // zoomLock: true,
        }],
        grid: {
          left: 30,
          right: '10%',
          top: '20%',
          bottom: '15%'
          // bottom: '30%',
          // containLabel: true
        },
        // dataZoom: [
        //
        //   {
        //     type: 'slider',
        //     startValue: start,
        //     endValue:end,
        //     zoomOnMouseWheel: false,
        //     zoomLock: true,
        //   },
        //   {
        //     type: 'inside'
        //   },
        // ],
        xAxis: [
          {
            type: 'category',
            data: dataAxis,
            boundaryGap: false,
            axisPointer: {
              type: 'none'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(102,255,255)',
              }
            },
            axisTick: {
              show: false
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '近周销售情况',
            axisLabel: {
              // formatter: '{value} 头'
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(102,255,255)',
              }
            },
            axisTick:{
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '销售',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            itemStyle : {
              color: '#289df5',
              borderColor: '#289df5',
              normal: {
                label : {
                  show: false,
                  textStyle: {
                    fontSize: 14
                  }
                },
                areaStyle: {
                  type: 'default',
                  opacity: 0.2
                }
              }
            },
            data: this.data.quantitys
          }
        ]
      }
      this.myChart.setOption(options)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('salesChart'));
    this.init()
  },
  watch: {
    data(newValue) {
      console.log(newValue)
      this.init()
    },
    color(newVal) {
      if(newVal) {
        this.myChart.clear();
        this.init()
      }
    }
  }
}
</script>
<style scoped>
.sales-chart {
  width: 100%;
  height: 100%;
}
#salesChart {
  width: 100%;
  height: 100%;
}
</style>
