zy-largeScreen-2/src/components/TimeUtilization.vue

<template>
  <div class="time-utilization" ref="TimeUtilization"></div>
</template>

<script>
import echarts from 'echarts'
import { post, timer4 } from './../http/http'
export default {
  name: 'TimeUtilization',
  inject: ['hospitalId'],
  data () {
    return {
      timer: null,
      myChart: null,
      groupWorkRatioName: [],
      groupWorkRatioNum: []
    }
  },
  methods: {
    // 画图
    draw () {
      this.myChart = echarts.init(this.$refs.TimeUtilization)

      const option = {
        title: {
          text: '时间利用率（%）',
          top: 5,
          left: 15,
          textStyle: {
            color: '#d4d6d7',
            fontSize: 12
          }
        },
        grid: {
          left: '10%',
          top: '20%',
          bottom: '20%',
          right: '5%'
        },
        xAxis: {
          data: this.groupWorkRatioName,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#709cc2'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#d4d6d7',
              fontSize: 12
            }
          }
        },
        yAxis: [
          {
            max: 1,
            min: 0,
            interval: 0.25,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#709cc2'
              }
            },
            axisLabel: {
              formatter (value) {
                return value * 100
              },
              textStyle: {
                color: '#d4d6d7',
                fontSize: 12
              }
            },
            splitArea: {
              areaStyle: {
                color: 'rgba(255,255,255,.5)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)',
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: 'hill',
            type: 'bar',
            barCategoryGap: '0%',
            barWidth: 24,
            symbol:
              'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            label: {
              show: false,
              position: 'top',
              distance: 0,
              color: '#70c2ab',
              fontWeight: 'bold',
              fontSize: 12
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(112,194,130, .8)' //  0%  处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(112,194,130, .1)' //  100%  处的颜色
                    }
                  ],
                  global: false //  缺省为  false
                }
              },
              emphasis: {
                opacity: 1
              }
            },
            data: this.groupWorkRatioNum,
            z: 10
          }
        ]
      }
      this.myChart.setOption(option)
    },
    // 获取数据
    async getData () {
      const srartTime = this.$moment()
        .subtract(29, 'days')
        .format('YYYY-MM-DD') // 近三十天
      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
      const result = await post(
        `/largeScreen/getData/groupWorkRatio/${this.hospitalId}`,
        { srartTime, endTime }
      )
      this.groupWorkRatioNum = []
      this.groupWorkRatioName = []
      if (result.groutWorkRatio.length > 5) {
        result.groutWorkRatio = result.groutWorkRatio.slice(0, 5)
      }
      result.groutWorkRatio.forEach(item => {
        this.groupWorkRatioNum.push(item[1] / 100) // 获取到的数据
        this.groupWorkRatioName.push(item[2]) // 获取到的名称
      })
      this.draw()
      this.polling()
    },
    // 轮询请求
    polling () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getData()
      }, timer4)
    }
  },
  mounted () {
    this.getData()
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  }
}
</script>

<style lang="less">
.time-utilization{
  height: 2.1375rem;
  margin: 0 auto;
}
</style>