css实现进度条根据不同内容渐变堆叠图，分上下两部分

当时UI出来这个图的时候真的想死，觉得好难呢，因为翻遍echarts的案例都没有这种，后来朋友启发说用css可以实现，后面真的可以实现出来，激动死我了，为了方便以后做类似的图表有灵感，特此记录一下 UI图：

下面是代码片段：

<div  class="w-1000px h-400px ml-32px">
          <div class="flex items-center w-1000px relative mb-18px">
            <div
              v-for="(item, index) in agePercentageData"
              :key="index"
              class="relative mt-24px"
              :style="{
                width:
                  (Number(agePercentageData[index].staffCnt) / Number(staffCount)) * 100 +
                  (Number(agePercentageData[index].staffCnt) / Number(staffCount)) * 100 +
                  '%',
              }"
            >
              <div v-if="index % 2 === 0">
                <div
                  class="w-6px h-36px absolute left-8px transform skew-y-45"
                  :style="{ background: `${projectTypeColor[index]}` }"
                ></div>
                <div
                  class="h-110px absolute w-3px left-9px transform"
                  :style="{ background: `${rgba(projectTypeColor[index], 0.1)}` }"
                ></div>
                <div class="cursor-pointer ml-30px">
                  <div class="text-20px leading-32px text-[#6688CC] font-bold">{{ item.staffType }}</div>
                  <div class="inline-flex items-center">
                    <span class="text-32px leading-35px text-[#CCDDFF] font-number">{{ item.staffCnt }}</span>
                    <span class="text-16px mt-10px text-[#6688CC] whitespace-nowrap mx-2px">人 </span>
                  </div>
                  <div class="text-24px mt-10px font-number" :style="{ color: `${projectTypeColor[index]}` }">
                    {{item.staffCnt / staffCount }}<span class="ml-2px">%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex items-center w-1000px border-t-2px border-b-2px border-solid border-[#07296d]">
            <div
              v-for="(item, index) in agePercentageData"
              :key="index"
              class="w-200px h-20px mt-4px mb-4px"
              :style="{
                background: `linear-gradient(to right, ${rgba(projectTypeColor[index], 0.3)} 0%, ${rgba(
                  projectTypeColor[index],
                  0.5,
                )} 50%, ${rgba(projectTypeColor[index], 1)} 100%)`,
                height: '0.32rem',
                width: (Number(item.staffCnt) / Number(staffCount)) * 100 + '%',
              }"
            ></div>
          </div>
          <div class="flex items-center w-1000px relative">
            <div
              v-for="(item, index) in agePercentageData"
              :key="index"
              class="relative mt-12px"
              :style="{
                width:
                  (Number(agePercentageData[index].staffCnt) / Number(staffCount)) * 100 +
                  (Number(agePercentageData[index].staffCnt) / Number(staffCount)) * 100 +
                  '%',
              }"
            >
              <div v-if="index % 2 !== 0">
                <div
                  class="w-3px h-100px absolute left-9px transform"
                  :style="{ background: `${rgba(projectTypeColor[index], 0.1)}` }"
                ></div>
                <div
                  class="w-6px h-36px absolute left-8px transform skew-y-45 bottom-0px"
                  :style="{ background: `${projectTypeColor[index]}` }"
                ></div>
                <div class="cursor-pointer ml-30px">
                  <div class="text-24px mb-4px font-number" :style="{ color: `${projectTypeColor[index]}` }">
                    {{ item.staffCnt / staffCount }}<span class="ml-2px">%</span>
                  </div>
                  <div class="inline-flex items-center">
                    <span class="text-32px mt-10px leading-35px text-[#CCDDFF] font-number">{{ item.staffCnt }}</span>
                    <span class="text-16px mt-10px text-[#6688CC] whitespace-nowrap mx-2px">人 </span>
                  </div>
                  <div class="text-20px leading-32px text-[#6688CC] font-bold">{{ item.staffType }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

js代码：

const staffCount = 6666 //总数
const agePercentageData = ref([{staffCnt：22,staffType：'50岁以上'}...]); // 后台返回数据结构
const projectTypeColor = ['#0055FF', '#00D4FF', '#FFD500', '#FF5500', '#00FFD4', '#AAFF00', '#AA00FF', '#E6EEFF'];

效果图：

上下标好像跟颜色块有一点没对齐，但总体是实现了

:style="{
                width:
                  (Number(agePercentageData[index].staffCnt) / Number(staffCount)) * 100 +
                  (Number(agePercentageData[index].staffCnt) / Number(staffCount)) * 100 +
                  '%',
              }"

这个地方可能有点问题，不知道有没有大佬指点一下呢