btgxq-dashuju/src/components/ddzhxt/rysshyqk.vue

<template>
  <div class="container9" @click="fn(rysshyqkUrl)">
    <div ref="line" class="line"></div>
  </div>
</template>

<script>
// import '@/utils/echa.js'
import { getRysshyqk } from '@/api/ddzhxt.js'
export default {
  data () {
    return {
      data: [],
      times: [],
      // number: [], 老数据
      // 新数据
      bossCount: [],
      zgyCount: [],
      rysshyqkUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-hour-user-rysshyqk.html'
    }
  },
  computed: {

  },
  created () {
    this.getRysshyqk()
    // setTimeout(() => {
    //   this.gr()

    // }, 300);
  },
  mounted () {
  },
  watch: {
  },
  methods: {
    fn (url) {
      // eslint-disable-next-line no-undef
      layer.open({
        type: 2,
        content: url,
        area: ['80%', '80%'],
        title: ''
      })
    },
    gr () {
      let myChart = this.$echarts.init(this.$refs.line)
      // 用于清除定时器
      var tootipTimer = null
      let option = {
        grid: {
          left: '3%',
          right: '7%',
          bottom: '5%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.times,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#fff'
            } // x轴刻度的颜色
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        tooltip: {
          show: true,
          borderWidth: 0,
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
          //   formatter: function (param) {
          //     return + param.name ;
          //   }
        },
        series: [
          {
            name: '网格员',
            data: this.bossCount,
            type: 'line'
            // 是否开启平滑
            // smooth: true,
            // 折线区域是面积及颜色
            // areaStyle: {
            //   color: '#e1e3eb'
            // }
          },
          {
            name: '专管员',

            data: this.zgyCount,
            type: 'line'
            // smooth: true,
            // areaStyle: {
            //   color: '#e1e3eb'
            // }
          }
        ]
      }
      myChart.setOption(option)
      let sizeFun = function () {
        myChart.resize()
      }
      window.addEventListener('resize', sizeFun)
      tootipTimer && tootipTimer.clearLoop()
      tootipTimer = null
      // 调用轮播的方法
      tootipTimer = window.loopShowTooltip(myChart, option, {
        interval: 2000, // 轮播间隔时间
        loopSeries: true // 是否开启轮播循环
      })
    },
    async getRysshyqk () {
      try {
        const res = await getRysshyqk()
        this.data = res.data.countClass
        console.log(res)
        this.data.forEach(item => {
          this.times.push(item.dateTime)
          this.bossCount.push(item.bossCount)
          this.zgyCount.push(item.zgyCount)
        })
        this.$nextTick(() => {
          this.gr()
        })
      } catch (error) {
        console.log('数据获取失败')
      }
    }
  }

}
</script>

<style scoped lang="scss">
.container9 {
  /* border: 1px solid #00ffff;     */
  width: 17.0833vw;
  height: 21.5749vh;

  .line {
    width: 17.0833vw;
    height: 21.5749vh;
  }
}
</style>