<template>
  <div class="charts">
    <div :id="configId" :style="{width:'100%',height:'450px'}"></div>
  </div>
</template>

<script>
    export default {
      name: "",
      data() {
        return {
          setTimer: null
        }
      },
      props: ['config', 'configId'],
      created() {
      },
      mounted(){
        eventBus.$on('closeBox',(val)=>{
          console.log('监听成功', val)
          if(this.setTimer){
            clearInterval(this.setTimer)
          }
        })
        this.drawLine();
      },
      methods: {
        drawLine(){
          function randomData() {
            now = new Date(+now + oneDay);
            // value = value + Math.random() * 21 - 10;

            // value = Math.random()*(9 - 6) + 10 + 1
            value = Math.floor(Math.random()*(9 - 6)+6) + 1
            return {
              name: now.toString(),
              value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                value
              ]
            }
          }

          var data = [];
          var now = +new Date(2019, 12, 24);
          var oneDay = 24 * 3600 * 1000;
          // var value = Math.random() * 1000;
          var value;
          for (var i = 0; i < 1000; i++) {
            data.push(randomData());
          }

          var option = {
            backgroundColor: '#fcfcfc',
            title: {
              text: 'pH值'
            },
            grid:{
              x:'9%',
              y:'10%',
              x2:'2.4%',
              y2:'10%',
            },
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);
                return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
              },
              axisPointer: {
                animation: false
              }
            },
            xAxis: {
              type:'time',
              splitNumber:24,
              splitLine: {
                show: false
              },
              // min: new Date(new Date().getTime() - 1 * 60 * 60 * 1000),
              min: new Date(new Date().getTime() - 2 * 60 * 60 * 1000),
            },
            yAxis: {
              type: 'value',
              // boundaryGap: [0, '100%'],
              splitLine: {
                show: false
              }
            },
            series: [{
              name: '模拟数据',
              type: 'line',
              showSymbol: false,
              hoverAnimation: false,
              data: data
            }]
          };

          let _this = this
          var str_spanvar =  _this.configId
          console.log(str_spanvar)
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById(str_spanvar));

          myChart.setOption(option)

          this.setTimer = setInterval(function () {

            for (var i = 0; i < 5; i++) {
              data.shift();
              data.push(randomData());
            }

            myChart.setOption({
              series: [{
                data: data
              }],
              xAxis: {
                type:'time',
                splitNumber:24,
                splitLine: {
                  show: false
                },
                // min: new Date(new Date().getTime() - 1 * 60 * 60 * 1000),
                min: new Date(new Date().getTime() - 2 * 60 * 60 * 1000),
              }
            });
          }, 3000);
        }
      }
    }
</script>

<style scoped lang="less" type="text/less">
.charts{
  margin-top: 25px;
  text-align: center;
  margin-left: 2%;
  display: inline-block;
}
</style>
