<template>
  <!-- <div>数据统计组件</div> -->
  <div :style="{ width: 'width', height: 'height' }" class="chart-box">
    <div id="Sensor" style="width: 100%"></div>
  </div>
</template>
<script>
import mixin from './Sensor.js';
// import option from './Sensor3D.js';
export default {
  name: 'Sensor',
  mixins: [mixin],
  data() {
    return {
      width: '',
      height: '',
    };
  },
  watch: {
    vibrationSensor(val) {
      console.log(val.value);
      if (val.type === 7) {
        var vibList = val.value.split(',');
        this.series1 = this.series1.concat(parseInt(vibList[0]));
        this.series2 = this.series2.concat(parseInt(vibList[1]));
        this.series3 = this.series3.concat(parseInt(vibList[2]));
        this.drawLine();
      }
      console.log(this.series1, this.series2, this.series3);
    },
  },
  mounted() {
    this.drawLine();
    let wh = window.innerWidth;
    let hg = window.innerHeight;
    this.width = wh + 'px';
    this.height = hg + 'px';
    console.log(this.height);
    window.onresize = () => {
      return (() => {
        wh = window.innerWidth;
        hg = window.innerHeight;
        this.width = wh + 'px';
        this.height = hg + 'px';
      })();
    };
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('Sensor'));
      // 绘制图表
      myChart.setOption(this.option);
    },
  },
};
</script>

<style lang="stylus" scoped ></style>
