<template>
  <div class="sjp-prizetrend">
      <div v-for="(item,index) of list" style="width: 70vw;height:300px;margin-top: 30px;" :key="index" :id="'id'+index"></div>
  </div>
</template>

<script>
import http from './../../service/statics'
export default {
  name: 'prizetrend',
  components: {  },
  props:['id'],
  data() {
    return {
      list:['','','','',''] // 默认展示五个统计表
    }
  },
  created() {
    http.overlordId({id:this.id}).then((res) => {
     this.$nextTick(() => {
       const obj = res.data || {}
        const list = [{
        legand:['活动影响人次','活动影响人数'],
        data:[
          obj.effectTime,
          obj.effectNumber,
        ],
        date: obj.effectDate,
      },{
        legand:['活动参与人次','活动参与人数'],
        data:[
          obj.participationTime,
          obj.participationNumber,
        ],
        date:obj.participationDate,
      },{
        legand:['感兴趣人次','感兴趣人数','感兴趣人数(c端)'],
        data:[
          obj.interestTime,
          obj.interestNumber,
          obj.interestNumberInC,
        ],
        date:obj.interestDate,
      },{
        legand:['报名人数'],
        data:[
          obj.signUpNumber,
        ],
        date:obj.signUpDate,
      },{
        legand:['使用人数'],
        data:[
          obj.verificationTime,
        ],
        date:obj.verificationDate,
      }]
      this.list = list || []
      this.initStatics()
     })
    })
  },
  methods:{
    initStatics(){
       for(let i = 0 ; i < this.list.length; i++) {
          let item = this.list[i]
          let dom = document.getElementById('id' + i)
          this.generateChart(dom, item)
        }
    },
    generateChart(dom,item){
         var chart = this.$echarts.init(dom);
         var option = {
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: item.legand
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
            
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: item.date.map((subitem)=>{
                    let arr = subitem.split('-')
                    return Number(arr[1]) + '.' + Number(arr[2])
                  })
              },
              yAxis: {
                  type: 'value'
              },
              series: item.data.map((subitem,index) => {
                  return {
                      type: 'line',
                      stack: '总量',
                      name: item.legand[index],
                      data: subitem
                  }
                })
              
          };
          chart.setOption(option)
    }
  },
  mounted(){
    
  }
}
</script>

<style lang="less" scoped>
 .sjp-prizetrend{
   height: 500px;
   overflow-y: scroll;
 }
</style>

