wisdomcar_counter/src/components/Day/Day.vue

<template>
  <!-- 选矿新版rfid图 -->
  <div>
    <div id="echarts" :style="{ width: '100%', height: '500px' }" class="chart-box">
      <div id="Day" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Day',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      width: '',
      height: '',
      timer: null,
      dateTiem: [],
      weightDate: [],
      weight1: [],
      weight2: [],
      start: 0,
      end: 100,
    };
  },

  computed: {
    // 定义option
    option() {
      return {
        legend: { data: ['体重数据', 'RFID'] },
        tooltip: { trigger: 'axis' },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.dateTiem,
        },
        yAxis: {
          type: 'value',
          axisLabel: { formatter: '{value}' },
        },
        series: [
          {
            name: '体重数据',
            type: 'line',
            step: 'start',
            // lineStyle: { color: '#73C0DE' },
            data: this.weightDate,
          },
          {
            name: 'RFID',
            type: 'line',
            markPoint: { data: this.weight1 },
            // data: this.weight2,
          },
        ],
      };
    },
  },
  watch: {
    list() {
      this.forList(this.list);
      this.drawLine();
    },
  },
  mounted() {
    this.forList(this.list);
    this.drawLine();
    let wh = window.innerWidth;
    let hg = window.innerHeight;
    this.width = wh + 'px';
    this.height = hg + 'px';
    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('Day'));
      // 绘制图表
      myChart.setOption(this.option);
    },
    getStyle(obj, attr) {
      if (obj.currentStyle) {
        return obj.currentStyle[attr];
      } else {
        return document.defaultView.getComputedStyle(obj, null)[attr];
      }
    },
    // 处理数组
    forList(list) {
      this.dateTiem = [];
      this.weightDate = [];
      this.weight1 = [];
      this.weight2 = [];
      // 获取横坐标
      for (let i = 0; i < list.length; i++) {
        this.dateTiem.push(this.format(parseInt(list[i].time)));
        this.weight2.push(-50);
      }
      // 体重数据数组
      for (let i = 0; i < list.length; i++) {
        this.weightDate.push(parseInt(list[i].value) / 1000);
      }
      // // 处理rfid横线
      // for (let i = 0; i < list.length; i++) {
      //   let obj = {};
      //   if (list[i].type === 2) {
      //     obj = {
      //       value: list[i].name,
      //       xAxis: this.format(parseInt(list[i].time)),
      //       yAxis: -50,
      //     };
      //   }
      //   this.weight1.push(obj);
      // }
      // 处理rfid横线
      for (let i = 0; i < list.length; i++) {
        let obj = {};
        if (list[i].type === 2) {
          obj = {
            value: list[i].name,
            xAxis: this.format(parseInt(list[i].time)),
            yAxis: parseInt(list[i].value) / 1000,
          };
          this.weight1.push(obj);
        }
      }
    },
    add0(m) {
      return m < 10 ? '0' + m : m;
    },
    format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm);
    },
  },
};
</script>

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