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

<!-- 地图 -->
<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title title">
        <div class="titleZn">{{ title }}</div>
        <div class="titleEn">{{ titleEn }}</div>
      </div>
      <div class="sn-body">
        <div class="wrap-container flex">
          <div class="chartsdom" id="cake"></div>
          <div class="panel">
            <div class="panelitem flex space_around">
              <div>
                <div class="number">{{ data.年移栽数量 }}</div>
                <div class="text">
                  <img
                    class="img1"
                    src="../../assets/img/rectangle.png"
                    alt=""
                  />
                  年移栽数量
                </div>
              </div>
              <div>
                <div class="number">{{ data.年移栽面积 }}</div>
                <div class="text">
                  <img
                    class="img1"
                    src="../../assets/img/rectangle.png"
                    alt=""
                  />年移栽面积
                </div>
              </div>
            </div>
            <div class="panelitem">
              <div class="flex space_between secondItem">
                <img class="img" src="../../assets/img/tree.png" alt="" />
                <div>移栽区域数</div>
                <div>{{ data.移栽区域数 }}</div>
              </div>
              <div class="flex space_between secondItem">
                <img class="img" src="../../assets/img/head.png" alt="" />
                <div>烟农数量</div>
                <div>{{ data.烟农数量 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: null,
      information: {},
    }
  },
  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: 42,
                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: true,
            startAngle: -35,
            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="scss" scoped>
.sn-container {
  width: 401px;
  height: 300px;
  .title {
    display: flex;
    justify-content: space-between;
    .titleEn {
      width: 120px;
      font-size: 8px;
      text-align: right;
      word-break: break-all;
      line-height: 1;
    }
  }
  .chartsdom {
    width: 80%;
    height: 80%;
  }
  .flex {
    display: flex;
    .panel {
      width: 80%;
      height: 80%;

      .panelitem {
        border-top: 2px solid #646464;
        box-sizing: border-box;
        height: 50%;
        margin: 0 10px;
        .secondItem {
          margin: 21px 0;
        }
      }
    }
  }
  .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>