E-commerce/src/components/Customize/cake.vue

<!-- 饼图统计 -->
<template>
  <div>
    <boxTop :title="title" />
    <div class="cakeBox flex">
      <div class="chartsdom" id="cake"></div>
      <div class="panel">
        <div class="panelitem flex space_around">
          <div v-if="data.年移栽数量">
            <div class="number">{{ data.年移栽数量 }}</div>
            <div class="text">
              <img class="img1" src="../../assets/img/rectangle.png" alt="" />
              年移栽数量
            </div>
          </div>
          <div v-if="data.年移栽面积">
            <div class="number">{{ data.年移栽面积 }}</div>
            <div class="text">
              <img
                class="img1"
                src="../../assets/img/rectangle.png"
                alt=""
              />年移栽面积
            </div>
          </div>
        </div>
        <div class="panelitem">
          <div v-if="data.移栽区域数" class="flex space_between secondItem">
            <img class="img" src="../../assets/img/tree.png" alt="" />
            <div>移栽区域数</div>
            <div>{{ data.移栽区域数 }}</div>
          </div>
          <div v-if="data.烟农数量" class="flex space_between secondItem">
            <img class="img" src="../../assets/img/head.png" alt="" />
            <div>烟农数量</div>
            <div>{{ data.烟农数量 }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import boxTop from '@/components/boxTop/index.vue'
export default {
  data() {
    return {
      option: null,
      information: {},
    }
  },
  components: {
    boxTop,
  },
  props: {
    data: {
      type: Object,
    },
    title: {
      type: String,
      default: ``,
    },
    titleEn: {
      type: String,
      default: `Tongren Tobacco Planting Digital Management Platform`,
    },
  },
  async mounted() {
    this.getEchart()
  },
  watch: {
    data() {
      this.getEchart()
    },
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById(`cake`))
      const title = `目标完成率`
      const value = this.data.目标完成率
      const splitLineLength = `19%`
      const splitLineDistance = -5
      const splitLineWidth = 2
      const int = value.toFixed(1).split(`.`)[0]
      const float = value.toFixed(1).split(`.`)[1]
      this.option = {
        title: {
          text: `{a|` + int + `}{b|.` + float + `%}\n{c|` + title + `}`,
          x: `center`,
          y: `center`,
          textStyle: {
            rich: {
              a: {
                fontSize: 36,
                color: `#fff`,
              },
              b: {
                fontSize: 20,
                color: `#96A2BC`,
                padding: [2, 0, 0, 0],
              },
              c: {
                fontSize: 16,
                color: `#96A2BC`,
                padding: [2, 0, 0, 0],
              },
            },
          },
        },

        series: [
          {
            type: `pie`,
            radius: [`84%`, `70%`],
            silent: true,
            clockwise: false,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            data: [
              {
                value: value,
                itemStyle: {
                  color: {
                    type: `linear`,
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: `#DFFFFF`, // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: `#0E7E7D`, // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
                label: {
                  show: false,
                },
              },
              {
                value: 100 - value,
                label: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: `rgba(15, 31, 52,1)`,
                  },
                },
              },
            ],
          },
          {
            name: ``,
            type: `gauge`,
            radius: `88%`,
            center: [`50%`, `50%`],
            startAngle: 0,
            endAngle: 360,
            splitNumber: 100,
            hoverAnimation: true,
            axisTick: {
              show: false,
            },
            splitLine: {
              length: splitLineLength,
              distance: splitLineDistance,
              lineStyle: {
                width: splitLineWidth,
                color: `#000`,
              },
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          {
            name: `外边框`,
            type: `pie`,
            clockwise: false, // 顺时加载
            emphasis: {
              scale: false, // 鼠标移入变大
            },
            center: [`50%`, `50%`],
            radius: [`88%`, `88%`],
            label: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: ``,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: `#24FFFD`,
                },
              },
            ],
          },
        ],
      }
      myChart.setOption(this.option)
    },
  },
}
</script>

<style lang="less" scoped>
.cakeBox {
  width: 401px;
  height: 234px;
  .chartsdom {
    width: 80%;
    height: 90%;
  }
  .panel {
    width: 80%;
    height: 80%;
    .panelitem {
      border-top: 2px solid rgba(255, 255, 255, 0.3);
      box-sizing: border-box;
      height: 50%;
      margin: 0 10px;
      .secondItem {
        font-size: 16px;
        margin: 21px 0;
      }
    }
  }
}
.flex {
  display: flex;
}
.img {
  height: 25px;
  margin-right: 3px;
}
.img1 {
  height: 17px;
  width: 3px;
  margin-right: 3px;
}
.l-height {
  line-height: 100%;
}
.space_around {
  justify-content: space-around;
  align-items: center;
}
.space_between {
  justify-content: space-between;
  align-items: center;
}
.number {
  font-size: 22px;
  padding: 4px 0;
  margin: 3px 0;
}
.text {
  font-size: 14px;
  color: #888888;
  display: flex;
  justify-content: center;
  align-items: center;
}
.column_reverse {
  flex-direction: column-reverse;
}
</style>