上传项目

Xxxu

2020-07-07 4f953ffc89fc95f83b152e914c5e65938b440f17

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,154 @@
<template>
    <div>
        <div id='streetlightChart' style='height:150px;width:100%'></div>
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      brightNum: 0,
      notBrightNum: 0
    }
  },
  computed: {
    streetlightList () {
      return this.$store.state.home.homeStreetlightList
    }
  },
  watch: {
    streetlightList (curVal, oldVal) {
      this.notBrightNum = 0
      this.brightNum = 0
      var streetlightList = curVal
      for (var i = 0; i < streetlightList.length; i++) {
        if (streetlightList[i].light === 0) {
          this.notBrightNum++
        } else {
          this.brightNum++
        }
      }
      this.drawChart()
    }
  },
  methods: {
    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.notBrightNum].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.brightNum].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.brightNum, name: '亮灯数量' }, { value: this.notBrightNum, name: '未亮灯数量' }]
          }
        ]
      }

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