Vue2.0组建开发-仪表盘
发布于 7 年前 作者 zgh2hh 3302 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

Vue2.0组件——


环形进度条(仪表盘)


实现

  1. 最终的仪表盘,见下图水质部分(上面的是vux自带的环形进度条,功能略微简单): 仪表盘

  2. 仪表盘主要有以下几个部分组成:

  • 最小值:min(默认为0)
  • 警戒最小值:alert-min
  • 警戒最大值:alert-max
  • 最大值:max(默认为100)
  1. Gauge组建——调用方式:
    <div class="water">
        <p>水质</p>
        <Flexbox wrap="wrap" :gutter="0" justify="center">
          <FlexboxItem :span="1/3" v-for='(water, i) in monitor.water' :key="water.peng_type">
            <Gauge :label="water.title"
                   :value="water.value | convert"
                   :min="water.min_value | convert"
                   :max="water.max_value | convert"
                   :alert-min="water.min_alert_value | convert"
                   :alert-max="water.max_alert_value | convert"
                   :peng-name="water.title"
                   field-name="一号水质监测点">
            </Gauge>
          </FlexboxItem>
        </Flexbox>
      </div>
  1. Gauge组建——实现:
  • 用circle绘制值,由styleObject(返回stroke-dasharray和stroke-dashoffset)实现,其半径(radius)和圆心坐标(cx, cy)可以由调用的时候传入,组建内部都有默认值;
  • 用path路径绘制lessNormal(小于正常值)断圆弧,属性d决定起始点和具体路径形状,通过describeArc计算d;
  • 用path路径绘制normal(正常值)断圆弧,属性d决定起始点和具体路径形状,通过describeArc计算d;;
  • 用path路径绘制moreNormal(大于正常值)断圆弧,属性d决定起始点和具体路径形状,通过describeArc计算d;;
  <template>
    <div class="donut">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="donut__svg">
        <circle id="donut-graph" v-bind:style="styleObject" :r="radius" :cy="cy" :cx="cx" stroke-width="5" stroke="url(#purple)"
                stroke-linejoin="round" stroke-linecap="round" stroke-opacity="0.7" fill="none"  transform="rotate(-90 50 50)"/>

        <path id="lessNormal" stroke="#FFD600" stroke-width="1.2" stroke-opacity="0.5" :d="offset.less"></path>
        <path id="normal" stroke="#04BE02" stroke-width="1.2" stroke-opacity="0.5" :d="offset.normal"></path>
        <path id="moreNormal" stroke="#C23531" stroke-width="1.2" stroke-opacity="0.5" :d="offset.more"></path>
        <defs>
          <linearGradient id="purple" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#7a5bcf"/>
            <stop offset="100%" stop-color="#8A6FD5"/>
          </linearGradient>
        </defs>

      </svg>
      <div class="donut_content">
        <span>
          {{label}}
        </span><br>
        <span>
          {{value}}
        </span>
      </div>
    </div>
  </template>
  methods: {
      computeOffsets: function () {
        this.offset = Object.assign({}, this.offset, {
          min2Normal: {
            offset: this.alertMin / (this.max - this.min),
            color: '#FFD600'
          },
          normal: {
            offset: this.alertMax / (this.max - this.min),
            color: '#04BE02'
          },
          normal2Max: {
            offset: 1,
            color: '#C23531'
          }
        });
        // 绘制小于正常值范围
        let lessEndAngleNum = this.alertMin / (this.max - this.min)
        let lessEndAngle = lessEndAngleNum * 360
        let less = describeArc(this.cx, this.cy, this.radius, 1, 0, lessEndAngle)
        this.$set(this.offset, 'less', less)

        // 绘制正常值范围
        let normalAngleNum = this.alertMax / (this.max - this.min)
        let normalAngle = normalAngleNum * 360
        let normal = describeArc(this.cx, this.cy, this.radius, 1, lessEndAngle, normalAngle)
        this.$set(this.offset, 'normal', normal)

        // 绘制大于正常值范围
        let moreEndAngleNum = this.max / (this.max - this.min)
        let moreEndAngle = moreEndAngleNum * 360
        let more = describeArc(this.cx, this.cy, this.radius, 1, normalAngle, moreEndAngle)
        this.$set(this.offset, 'more', more)
      }
    },
    computed: {
      circumference: function () {
        return 2 * Math.PI * this.radius
      },
      styleObject: function () {
        return {
          "stroke-dasharray": this.circumference,
          "stroke-dashoffset": this.circumference - ((this.value / (this.max - this.min)) * this.circumference)// 不是除以100
        }
      }
    }

详细代码

详细代码请见我的github,如有帮助,感谢star:

涉及技术、参考

回到顶部