上传项目

Xxxu

2020-07-07 4f953ffc89fc95f83b152e914c5e65938b440f17

 src/views/modules/home/splash/splash-chart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,234 @@
<template>
    <div class='mainSplashPan'>
        <div id='splash' style='height:180px;width:100%'>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      deviceNum: 0
    }
  },
  computed: {
    streetlightList () {
      return this.$store.state.home.homeStreetlightList
    }
  },
  watch: {
    streetlightList (curVal, oldVal) {
      this.deviceNum = curVal.length
      let _this = this
      setTimeout(function () {
        _this.drawChart()
      }, 1000)
    }
  },
  methods: {
    drawChart () {
      var option = {
        title: {
          text: '总设备\n' + this.deviceNum + '个',
          left: '23%',
          top: '48%',
          textStyle: {
            color: 'white',
            fontSize: 13,
            align: 'center'
          }
        },
        legend: {
          orient: 'vertical',
          right: 0,
          top: 20,
          data: ['灰尘浓度告警', '已喷洒', '未开启监测点'],
          textStyle: {
            color: 'white'
          }
        },
        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: ['50%', '60%'],
            avoidLabelOverlap: false,
            center: ['30%', '50%'],
            startAngle: 10,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.value + '个'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '5',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: [
              { value: 20, name: '灰尘浓度告警' },
              { value: 70, name: '无' }
            ],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#FA3E3D', 'rgba(0,0,0,0.2)']
                  return colorList[params.dataIndex]
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            name: '喷洒数量',
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            startAngle: 10,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.value + '个'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '5',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: [
              { value: 30, name: '已喷洒' },
              { value: 70, name: '未喷洒' }
            ],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#8A73E7', 'rgba(0,0,0,0.2)']
                  return colorList[params.dataIndex]
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            name: '监测点',
            type: 'pie',
            radius: ['70%', '80%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            startAngle: 10,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.value + '个'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '5',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: [
              { value: 35, name: '未开启监测点' },
              { value: 40, name: '开启' }
            ],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#0672FD', 'rgba(0,0,0,0.2)']
                  return colorList[params.dataIndex]
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      var splash = echarts.init(document.getElementById('splash'))
      splash.setOption(option)
    }
  }
}
</script>
<style>
.mainSplashPan {
  background: url(~@/assets/img/home/splash/center.png)
    no-repeat;
  background-position: 24%;
  background-size: 25% 50%;
}
</style>