huimv_cloud_client/src/views/deviceAdmin/charts/hisAndLine.vue

<template>
  <div class="his-and-line">
    <div id="two" class="two"></div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: ['time', 'scope'],
  data() {
    return {
      dates: [],
      temps: [],
      eartags: [],
      chart: null,
      deviceCode: ''
    }
  },
  computed: {
    ...mapState(['baseUrl'])
  },
  methods: {
    draw () {
      this.chart.showLoading()
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['环境温度', '耳标上传数据量']
        },
        xAxis: {
          data: this.dates
        },
        yAxis: [
          
          {
            type: 'value',
            name: '℃',
            axisLabel: {
              textStyle: {
                color: '#000'
              }
            },
            splitLine: {
              show:false
            },
            // axisLine: {
            //   lineStyle: {
            //     color: '#00ffff'
            //   }
            // },
            axisTick: { // 刻度线
              show: false,
            }
          },
          {
            type: 'value',
            name: '次',
            axisLabel: {
              textStyle: {
                color: '#000'
              }
            },
            // axisLine: {
            //   lineStyle: {
            //     color: '#00ffff'
            //   }
            // },
            axisTick: { // 刻度线
              show: false
            }
          }
        ],
        series: [
          {
            name: '环境温度',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#02a7f0'
                },
                color: '#02a7f0'
              }
            },
            data: this.temps
          },
          {
            name: '耳标上传数据量',
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                color: '#5fa7f0'
              }
            },
            data: this.eartags
          }
        ]
      }
      this.chart.setOption(option)
      setTimeout(() => {
          this.chart.hideLoading();//隐藏等待条
      }, 1000);
    },
    init () {
      this.chart = this.$echarts.init(document.getElementById('two'))
      this.deviceCode = this.$route.params.deviceCode
      this.$http({
        url: this.$http.adornUrl(`${this.baseUrl}/manager/eartagdata/${this.scope === 1? 'countByDay': 'countByTime' }`),
        method: 'get',
        params: this.$http.adornParams({
          'deviceCode': this.deviceCode,
          'startTime': this.time[0] || undefined,
          'endTime': this.time[1] || undefined
        }, false)
      }).then(async({data}) => {
        if (data.code === 0) {
          this.dates = data.data.time
          this.temps = data.data.envTemp
          this.eartags = data.data.count
          this.draw()
        }
      }).catch(() => {
      })
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    time: {
      handler(newVal) {
        if(newVal) {
          this.init()
        }
      }
    },
    scope: {
      handler (newValue) {
        if (newValue) {
          this.init()
        }
      }
    }
  }
}
</script>
<style scoped>
  .his-and-line {
    margin: auto;
    height: 340px;
    padding: 20px 20px;
  }
  .two {
    height: 300px;
    width: 100%;
    margin: auto;
  }
</style>