9.5 饼状图（Pie Chart）

此组件为APP内置组件，不需要前端import导入, 可直接在template里使用。

### 实例 :

饼状图

扫码预览

基础用法

<template>
  <div class="wrapper">
    <dof-minibar title="饼状图"></dof-minibar>
    <scroller>
      <div class="title">
        <text class="title_text">基本环形图</text>
      </div>
      <div class="content_box">
        <text class="content_text">数据详情</text>
        <div class="content">
          <midea-piechart-view class="chart" :data="chartData"></midea-piechart-view>
          <div class="piechart_inner">
            <text class="inner_text">Cost today</text>
            <text class="inner_val">25度</text>
          </div>
          <div class="tip_right">
            <div v-for="(item, i) in right_data" :key="i" class="tip_item_box">
              <div class="tip_item">
                <div class="tip_color" :style="{ backgroundColor: item.color }"></div>
                <text class="tip_text">{{ item.text }}</text>
              </div>
              <text class="tip_val">{{ item.val }}</text>
            </div>
          </div>
        </div>

        <text class="content_text m-t-32">数据详情-数据加载中</text>
        <div class="content">
          <midea-piechart-view class="chart" :data="chartData2"></midea-piechart-view>
          <div class="piechart_inner">
            <text class="inner_text">Cost today</text>
            <text class="inner_val">- -</text>
          </div>
          <div class="tip_right">
            <div v-for="(item, i) in right_data2" :key="i" class="tip_item_box">
              <div class="tip_item">
                <div class="tip_color" :style="{ backgroundColor: item.color }"></div>
                <text class="tip_text">{{ item.text }}</text>
              </div>
              <text class="tip_val">{{ item.val }}</text>
            </div>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #f2f2f2;
}
.title {
  background-color: #e5e5e8;
  height: 104px;
  padding: 0 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.title_text {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #000000;
}
.content_box {
  padding: 48px 32px;
}
.content_text {
  font-family: PingFangSC-Semibold;
  font-size: 36px;
  color: #333333;
  font-weight: 600;
  margin-bottom: 20px;
}
.content {
  background: #ffffff;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.04);
  border-radius: 32px;
  min-height: 600px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.chart {
  width: 500px;
  height: 500px;
}
.piechart_inner {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 90px;
  background-color: #f9f9f9;
  left: 160px;
  top: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.inner_text {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: rgba(94, 94, 94, 0.58);
}
.inner_val {
  font-family: PingFangSC-Regular;
  font-size: 36px;
  color: #5e5e5e;
  margin-top: 10px;
}
.tip_item_box {
  margin-bottom: 20px;
}
.tip_item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.tip_color {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  margin-right: 8px;
}
.tip_text {
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: rgba(94, 94, 94, 0.58);
}
.tip_val {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: #5e5e5e;
}
.m-t-32 {
  margin-top: 32px;
}
</style>

<script>
import { DofMinibar } from 'dolphin-intl-ui'
export default {
  components: { DofMinibar },
  data: () => ({
    chartData: {
      data: {
        piechartdata: {
          unit: '',
          piename: '',
          total: '',
          totalnumber: '',
          datalist: [
            {
              numdata: '45',
              colorvalue: '#10C2FF'
            },
            {
              numdata: '45',
              colorvalue: '#FF6A4C'
            },
            {
              numdata: '10',
              colorvalue: '#6575FF'
            },
            {
              numdata: '20',
              colorvalue: '#267AFF'
            },
            {
              numdata: '60',
              colorvalue: '#FEAC15'
            }
          ]
        }
      }
    },
    right_data: [
      { color: '#6575FF', text: 'TBH', val: '100kWh' },
      { color: '#10C2FF', text: 'Cooling', val: '52kWh' },
      { color: '#267AFF', text: 'IBH', val: '100kWh' },
      { color: '#FEAC15', text: 'Heating', val: '100kWh' },
      { color: '#FF6A4C', text: 'DHW', val: '53kWh' }
    ],
    chartData2: {
      data: {
        piechartdata: {
          unit: '',
          piename: '',
          total: '',
          totalnumber: '',
          totalNumberColor: '#6575FF',
          totalNumberTextSize: 14,
          nameColor: '',
          nameTextSize: 14,
          itemLabelShow: false,
          itemLabelTextColor: '',
          bgColor: '',
          radius: 10,
          innerRadiusPercent: 0.8,
          lineWidth: 0,
          innerBgColor: '',
          rotationAngle: 110,
          needSort: true,
          datalist: [
            {
              eachname: '',
              numdata: '1',
              colorvalue: '#F9F9F9'
            }
          ]
        }
      }
    },
    right_data2: [
      { color: '#6575FF', text: 'TBH', val: '- -' },
      { color: '#10C2FF', text: 'Cooling', val: '- -' },
      { color: '#267AFF', text: 'IBH', val: '- -' },
      { color: '#FEAC15', text: 'Heating', val: '- -' },
      { color: '#FF6A4C', text: 'DHW', val: '- -' }
    ]
  }),
  methods: {}
}
</script>

Attributes

Prop	Type	Required	Default	Description
data	Object	Y	{}	饼图配置对象，包含 data.piechartdata；示例变量为 chartData

饼图具体参数位于传入对象的 data.piechartdata 中，即页面变量 chartData.data.piechartdata。

数据包装示例

以下示例将饼图参数包装为 type → data → piechartdata，通过组件的 :data 传入：

<midea-piechart-view :data="pieData" />

const pieData = {
  type: 3,
  data: {
    name: 'My Device',
    piechartdata: {
      unit: 'kWh',
      piename: 'Total',
      total: 2,
      totalnumber: 9874,
      sliceSpace: 1,
      datalist: [
        { eachname: '照明', numdata: '40%', colorvalue: '#267AFF' },
        { eachname: '其他', numdata: '60%', colorvalue: '#36CBCB' },
      ],
    },
  },
}

此示例的 numdata 使用百分比字符串。下表数值类型的 style 用于设置饼图中心描述与数字的位置。

参数详情： piechartdata （注 1）

Prop	Type	Required	Default	Description
unit	String	N	-	单位
piename	String	N	-	饼图中间的文字
nameColor	string	N	``	饼状图中间文字颜色
nameTextSize	number	N	``	饼状图中间文字大小
total	Number	N	-	饼图分几等分
totalnumber	Number	N	-	饼图中间的数字，总数
totalNumberColor	String	N	#FF0000	饼图中间数字颜色
totalNumberTextSize	number	N	``	饼状图中间数字大小
itemLabelShow	Boolean	N	-	展示每个圆环代表的模块线
itemLabelTextColor	string	N	``	外层文本颜色
bgColor	string	N	``	背景颜色
radius	number	N	``	饼图半径
innerRadiusPercent	number	N	``	内圆半径 取值0-1
lineWidth	number	N	``	外圈宽度
innerBgColor	string	N	``	内圆背景色
rotationAngle	number	N	``	开始角度 默认110度
needSort	boolean	N	``	是否需要排序 Android之前会对数据排序，为了和ios一致新增加这个字段，默认是true, 改成false就和ios一致了
datalist	array	N	[]	饼状图分段配置
sliceSpace	Number	N	-	iOS 色块之间的间隔，固定为 1
holeRadiusPercent	Number	N	-	圆环半径占比配置
style	Number	N	-	中心描述与数字的位置：0 为描述在上、数字在下，1 为相反顺序
labelMaxLength	Number	N	-	标识label 可以显示的最大的字符数
hideCenterShadow	Boolean	N	-	隐藏中间的圆环
lineMarginAlignment	Boolean	N	-	-
entryLabelColor	String	N	-	线下面文字的颜色
valueLineColor	String	N	-	引导线颜色
circleColor	String	N	#FFFFFF	中间圆颜色
pienameColor	String	N	#3377FF	label(总能耗)颜色

参数详情：datalist （注 1）

Prop	Type	Required	Default	Description
eachname	String	N	-	色块代表的部分的名称
numdata	String	Y	-	占比
colorvalue	String	Y	-	色块代表需要展示的颜色色值