手写echats

<template>
  <div class="progress-bar-wrapper">
    <div style="width: 100%">
      <div class="progress-bar">
        <div style="width: 70px">{{ title }}</div>
        <div class="progress-bar">
          <div
            class="progress-bar-item"
            :class="data.length > 2 ? 'center' : 'justify'"
            v-for="(item, index) in data"
            :key="`progress-bar-${index}`"
            :style="{
              width: getWidth(item.value) + '%',
              background: color[index],
            }"
          ></div>
          <div
            class="progrennbar-item2"
            style="text-align: right"
            :style="{
              width: getWidth1(value1) + '%',
              background: color1[0],
            }"
          >
            <span style="color: #fff; font-size: 16px; margin-right: 20px">{{
              value1
            }}</span>
          </div>
        </div>
      </div>
      <div v-if="totaltext1" style="display: flex; margin-left: 70px">
        <div style="margin-right: 50px">身高：{{ "121cm" }}</div>
        <div>体重：{{ "26kg" }}</div>
      </div>
      <div v-if="totaltext2">
        <div
          class="progress-bar"
          style="
            justify-content: space-around;
            padding-left: 45px;
            margin-top: 20px;
          "
        >
          <div v-for="(item, index) in data" :key="index">
            <div class="progress-bar-txt" style="display: flex">
              <div
                style="width: 16px; height: 16px; margin-right: 5px"
                :style="{
                  background: color[index],
                }"
              ></div>
              {{ item.name }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="width: 16px; height: 16px; margin-right: 5px"
              :style="{
                background: color1[0],
              }"
            ></div>
            {{ "实际值" }}
          </div>
        </div>
      </div>
    </div>
    <div class="progress-bar-total" v-if="totalText">
      <span style="font-size: 26px">{{ total1 !== 0 ? total1 : total }}</span>
      <span>{{ totalText || "总数" }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "progressbarchar",
  props: [
    "data",
    "color",
    "total1",
    "totalText",
    "title",
    "value1",
    "color1",
    "totaltext1",
    "totaltext2",
  ],
  computed: {
    total() {
      let num = 0;
      if (this.data && this.data.length) {
        this.data.forEach((item) => {
          num += item.value;
        });
      }
      return num;
    },
  },
  methods: {
    getWidth(value) {
      return (value / this.total) * 100;
    },
    getWidth1(value) {
      return (value / this.total) * 100;
    },
  },
};
</script>
<style lang="less" scoped>
.progress-bar-wrapper {
  display: flex;
  height: 44px;
  justify-content: space-between;
  .progress-bar {
    position: relative;
    display: flex;
    flex: 1 1;
    align-items: center;
    .progrennbar-item2 {
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -12.5px;
      height: 21px;
    }
    .progress-bar-item {
      padding: 0 10px;
      position: relative;
      height: 30px;
      line-height: 30px;
      margin-bottom: 5px;
      &:first-child {
        white-space: nowrap;
      }
      &:last-child {
        white-space: nowrap;
      }
      .progress-bar-txt {
        position: absolute;
        top: 100%;
        width: 100%;
      }
      &.center {
        .progress-bar-txt {
          text-align: center;
        }
      }
      &.justify {
        &:last-child {
          text-align: right;
        }
      }
    }
  }
  .progress-bar-total {
    display: flex;
    flex-flow: column;
    width: 24%;
    padding-left: 20px;
    margin-top: -10px;
    span {
      text-align: center;
      &:first-child {
        color: #e64343;
        font-size: 18px;
        font-weight: bold;
      }
      &:last-child {
        color: #333;
        font-size: 12px;
      }
    }
  }
}
</style>