上传项目

Xxxu

2020-07-07 4f953ffc89fc95f83b152e914c5e65938b440f17

 src/views/modules/home/user-base-info/user-base-info-camera-chart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,155 @@
<template>
    <div>
        <div id='chart' style='height:150px;width:100%'></div>
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      onlineNum: 0,
      outlineNum: 0
    }
  },
  activated () {
    this.getOnlineCamera()
  },
  methods: {
    getOnlineCamera () {
      this.$http({
        url: this.$http.adornUrl('/pole/polecamera/getOnline'),
        method: 'get'
      }).then(({data}) => {
        var onlineList = data.list // å°†æ‰€æœ‰æ•°æ®ä¿å­˜
        this.onlineNum = 0
        this.outlineNum = 0
        for (var i = 0; i < onlineList.length; i++) {
          if (onlineList[i].onlineStatus === 1) {
            this.onlineNum++
          } else {
            this.outlineNum++
          }
        }
        this.drawChart()
      })
    },
    drawChart () {
      var option = {
        color: ['#09BAFE', '#FC0A15'],
        title: {
          text: '摄像头/台',
          left: 'center',
          top: '45%',
          textStyle: {
            color: 'white',
            fontSize: 13,
            align: 'center'
          }
        },

        graphic: [
          {
            type: 'group',
            left: '15%',
            top: '15%',
            children: [
              {
                type: 'text',
                z: 100,
                style: {
                  fill: '#FC0A15',
                  text: [this.outlineNum].join('\n'),
                  font: '14px Microsoft YaHei'
                }
              }
            ]
          },
          {
            type: 'group',
            left: '70%',
            top: '15%',
            children: [
              {
                type: 'text',
                z: 100,
                left: 50,
                top: 500,
                style: {
                  fill: '#09BAFE',
                  text: [this.onlineNum].join('\n'),
                  font: '14px Microsoft YaHei'
                }
              }
            ]
          }
        ],

        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b}: {c} ({d}%)',
          formatter: '{a} <br/>{b}: {c}',
          position: function (point, params, dom, rect, size) {
            // å…¶ä¸­point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
            var x = point[0] //
            var y = point[1]
            var boxWidth = size.contentSize[0]
            var boxHeight = size.contentSize[1]
            var posX = 0 // x坐标位置
            var posY = 0 // y坐标位置

            if (x < boxWidth) {
              // å·¦è¾¹æ”¾ä¸å¼€
              posX = 5
            } else {
              // å·¦è¾¹æ”¾çš„下
              posX = x - boxWidth
            }

            if (y < boxHeight) {
              // ä¸Šè¾¹æ”¾ä¸å¼€
              posY = 5
            } else {
              // ä¸Šè¾¹æ”¾å¾—下
              posY = y - boxHeight
            }

            return [posX, posY]
          }
        },
        series: [
          {
            name: '摄像头在线数量',
            type: 'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: '5',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{ value: this.onlineNum, name: '在线' }, { value: this.outlineNum, name: '不在线' }]
          }
        ]
      }

      var echart = echarts.init(document.getElementById('chart'))
      echart.setOption(option)
    }
  }
}
</script>
<style>
</style>