# 9.3 饼状图

<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-weex-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: '',
          datalist: [
            {
              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>