圆环进度图（circle-progress）

9.4 圆环进度图（circle-progress）

通过圆环的UI样式，体现数据百分比。

使用规则

多用于耗材相关数据展示，以图形化的方式，辅助使用进度数字展示。

#实例 :

圆环进度图

扫码预览

#基础用法

<template>
  <div class="box">
    <dof-minibar title="midea-circle-progress"></dof-minibar>
    <div style="padding: 30px;">
      <dof-row class="showItem" style="padding-top: 32px;">
        <dof-col class="circleItem">
          <midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson1 }"> </midea-circle-progress-view>
          <text class="contentText">智能杯贴</text>
          <text class="contentTip">再饮200ml达标</text>
        </dof-col>
        <dof-col class="circleItem">
          <midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson2 }"> </midea-circle-progress-view>
          <text class="contentText">智能杯贴</text>
          <text class="contentTip">已达标</text>
        </dof-col>
        <dof-col class="circleItem">
          <midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson3 }"> </midea-circle-progress-view>
          <text class="contentText">智能杯贴</text>
          <text class="contentTip">再饮800ml达标</text>
        </dof-col>
      </dof-row>

      <dof-row class="showItem" style="padding-top: 32px;">
        <dof-col class="circleItem">
          <midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson4 }"> </midea-circle-progress-view>
          <text class="contentText">滤芯1</text>
        </dof-col>
        <dof-col class="circleItem">
          <midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson5 }"> </midea-circle-progress-view>
          <text class="contentText">滤芯2</text>
        </dof-col>
        <dof-col class="circleItem">
          <midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson6 }"> </midea-circle-progress-view>
          <text class="contentText">滤芯3</text>
        </dof-col>
      </dof-row>
    </div>
  </div>
</template>

<script>
import { DofMinibar, DofRow, DofCol } from 'dolphin-weex-ui'

module.exports = {
  components: {
    DofMinibar,
    DofRow,
    DofCol
  },
  data: () => ({
    common: {
      completedColor: '#FFFFFF', //已完成后的颜色默认#FFFFFF
      backgroundColor: '#1a1a1c', //背景色 默认为#000000
      backCircleColor: '#434345', //进度背景色，默认为#3d3d3f
      lineWidth: 2, //线宽 默认为2
      textFont: 14 //字体大小，默认为14
    },
    chartJson1: {
      progress: 0.85, // 进度 0 -1
      text: '85%', //文本 默认为空
      textColor: '#ffffff' //文本颜色，默认#FFFFFF
    },
    chartJson2: {
      progress: 1, // 进度 0 -1
      text: '100天', //文本 默认为空
      textColor: '#ffffff' //文本颜色，默认#FFFFFF
    },
    chartJson3: {
      progress: 0.05, // 进度 0 -1
      text: '5%', //文本 默认为空
      textColor: '#ffffff' //文本颜色，默认#FFFFFF
    },
    chartJson4: {
      progress: 0.85, // 进度 0 -1
      text: '85%', //文本 默认为空
      textColor: '#ffffff' //文本颜色，默认#FFFFFF
    },
    chartJson5: {
      progress: 0, // 进度 0 -1
      text: '已过期', //文本 默认为空
      textColor: '#B35336' //文本颜色，默认#FFFFFF
    },
    chartJson6: {
      progress: 0.05, // 进度 0 -1
      text: '5%', //文本 默认为空
      textColor: '#ffffff' //文本颜色，默认#FFFFFF
    }
  }),
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.box {
  background-color: #29292c;
}
.showItem {
  background-color: #1a1a1c;
  /* width: 600px; */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-bottom: 24px;
}
.circle {
  width: 118px;
  height: 118px;
}
.circleItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 248px;
}
.contentText {
  font-family: PingFangSC-Medium;
  font-size: 28px;
  color: #ffffff;
  text-align: center;
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 8px;
}
.contentTip {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: #71717a;
  font-weight: 400;
  margin-bottom: 28px;
}
</style>

#Attributes

Prop	Type	Required	Default	Description
data	Object	Y	{}	配置参数

#参数详情： data （注 1）

Prop	Type	Required	Default	Description
progress	number	N	0	进度 0-1
text	string	N	``	圆环中间文本 默认为空
textColor	string	N	#ffffff	文本颜色，默认#FFFFFF
completedColor	string	N	#ffffff	已完成后的颜色默认#FFFFFF
backgroundColor	string	N	#000000	背景色 默认为#000000
backCircleColor	string	N	#434345	进度背景色，默认为#3d3d3f
lineWidth	number	N	2	线宽 默认为2
textFont	number	N	14	字体大小，默认为14