admin/src/components/dashboard/index.vue

<template>
  <div class="component">
    <h6 class="title">{{data.title}}</h6>
    <div :id="'dashboard' + index" ref="box"></div>
  </div>
</template>

<script>
import G2 from '@antv/g2'

export default {
  name: '',
  props: ['data', 'index'],
  data () {
    return {
    }
  },
  components: {
    G2,
  },
  mounted () {
    this.$nextTick(function () {
      this.init()
    })
  },
  methods: {
    returnValue (val) {
      return String(val).substring(0, 2).split('').join('.') - 0
    },
    init () {
      var _that = this
      var Shape = G2.Shape
      var aValue = _that.returnValue(_that.data.value)
      // 自定义Shape 部分
      Shape.registerShape('point', 'pointer', {
        drawShape: function drawShape (cfg, group) {
          var center = this.parsePoint({ // 获取极坐标系下画布中心点
            x: 0,
            y: 0
          })
          // 绘制指针
          group.addShape('line', {
            attrs: {
              x1: center.x,
              y1: center.y,
              x2: cfg.x,
              y2: cfg.y,
              stroke: cfg.color,
              lineWidth: 5,
              lineCap: 'round'
            }
          })
          return group.addShape('circle', {
            attrs: {
              x: center.x,
              y: center.y,
              r: 8,
              stroke: cfg.color,
              lineWidth: 4.5,
              fill: '#fff'
            }
          })
        }
      })
      var chart = new G2.Chart({
        container: 'dashboard' + _that.index,
        forceFit: true,
        width: _that.$refs.box.clientWidth,
        height: 400,
        padding: [0, 0, 30, 0]
      })
      chart.source([{ value: aValue }])

      chart.coord('polar', {
        startAngle: -9 / 8 * Math.PI,
        endAngle: 1 / 8 * Math.PI,
        radius: 0.75
      })
      chart.scale('value', {
        min: 0,
        max: 9,
        tickInterval: 1,
        nice: false
      })

      chart.axis('1', false)
      chart.axis('value', {
        zIndex: 2,
        line: null,
        label: {
          offset: -16,
          textStyle: {
            fontSize: 18,
            textAlign: 'center',
            textBaseline: 'middle'
          }
        },
        subTickCount: 4,
        subTickLine: {
          length: -8,
          stroke: '#fff',
          strokeOpacity: 1
        },
        tickLine: {
          length: -17,
          stroke: '#fff',
          strokeOpacity: 1
        },
        grid: null
      })
      chart.legend(false)
      chart.point().position('value*1').shape('pointer').color('#1890FF').active(false)

      // 绘制仪表盘背景
      chart.guide().arc({
        zIndex: 0,
        top: false,
        start: [0, 0.945],
        end: [9, 0.945],
        style: { // 底灰色
          stroke: '#CBCBCB',
          lineWidth: 18
        }
      })
      // 绘制指标
      chart.guide().arc({
        zIndex: 1,
        start: [0, 0.945],
        end: [aValue, 0.945],
        style: {
          stroke: '#1890FF',
          lineWidth: 18
        }
      })
      // 绘制指标数字
      chart.guide().html({
        position: ['50%', '100%'],
        html: '<div style="width: 300px;text-align: center;">' + '<p style="font-size: 20px; color: #545454;margin: 0;">' + _that.data.title + '</p>' + '<p style="font-size: 36px;color: #545454;margin: 0;">' + aValue * 10 + '%</p>' + '</div>'
      })

      chart.render()
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>