rsxm-master/src/views/integratedTrainingPlatform/components/contentThreeBoxFour.vue

<template>
  <!-- 页面的 HTML 模板部分 -->
  <div class="pieBigBox">
    <div class="pieMain">
      <div class="pieBox" ref="pieRef"></div>
      <div class="pieTitle">证书占比</div>
    </div>
    <ul class="pieLsit">
      <li>
        <div><span class="blockOne"></span><span>劳务经济人证书</span></div>
        <div>
          <span class="numb">47</span><span class="proportion">34.55%</span>
        </div>
      </li>
      <li>
        <div><span class="blockTwo"></span><span>初级证书</span></div>
        <div>
          <span class="numb">58</span><span class="proportion">42.02%</span>
        </div>
      </li>
      <li>
        <div><span class="blockThree"></span><span>中级证书</span></div>
        <div>
          <span class="numb">23</span><span class="proportion">16.66%</span>
        </div>
      </li>
      <li>
        <div><span class="blockFour"></span><span>高级证书</span></div>
        <div>
          <span class="numb">8</span><span class="proportion">5.79%</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import * as echarts from "echarts";
const pieRef = ref(null);
const option = {
  // 设置图形位置
  tooltip: {
    trigger: "item"
  },

  series: [
    {
      name: "学历占比",
      type: "pie",
      radius: ["65%", "80%"],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 1
      },
      label: {
        show: false,
        position: "center"
      },

      labelLine: {
        show: false
      },
      data: [
        { value: 47, name: "劳务经济人证书", itemStyle: { color: "#58A8FF" } },
        { value: 58, name: "初级证书", itemStyle: { color: "#30DCFF" } },
        { value: 23, name: "中级证书", itemStyle: { color: "#ffffff" } },
        { value: 8, name: "高级证书", itemStyle: { color: "#dd7d4d" } }
      ]
    }
  ]
};

// 生命周期钩子
onMounted(() => {
  if (pieRef.value) {
    const chart = echarts.init(pieRef.value);
    // 设置option
    chart.setOption(option);
  }
});
</script>

<style lang="scss" scoped>
.pieBigBox {
  width: 600px;
  margin: 0 auto;
  height: 274px;
  .pieMain {
    position: relative;
    border: 1px solid transparent;
    float: left;
    .pieBox {
      margin: 0 auto;
      margin-top: 20px;
      width: 230px;
      height: 230px;
      background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
        center;
      background-size: 100%;
    }
    .pieTitle {
      position: absolute;
      top: 50%;
      width: 100%;
      text-align: center;
      z-index: 10;
      margin-top: -0px;
    }
  }
  ul.pieLsit {
    float: left;
    margin: 10px 0 0 20px;
    border: 1px solid transparent;
    padding: 10px 0 0 0;
    width: 340px;
    li {
      // font-size: 16px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 40px;
      padding: 0 10px;
      background: rgba(203, 242, 250, 0.2);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(203, 242, 250, 0.2);
      margin-top: 12px;
      > div {
        height: 100%;
        line-height: 40px;
      }
      .blockOne,
      .blockTwo,
      .blockThree,
      .blockFour {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 8px;
      }
      .blockOne {
        background-color: #58a8ff;
      }
      .blockTwo {
        background-color: #30dcff;
      }
      .blockThree {
        background-color: #ffffff;
      }
      .blockFour {
        background-color: #dd7d4d;
      }
      .proportion {
        display: inline-block;
        width: 80px;
        text-align: right;
      }
    }
  }
}
</style>