Echarts圆角环形图

结果图例

<template>
  <!-- 环形图组件 -->
  <div class="pieChartRadius">
    <div class="boxImage" ref="bodyImage" style="display:block">
      <div class="flexbox align-items-center">
        <!-- 环形图容器 -->
        <div>
          <div id="main" ref="main" class="echartsStyle"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
   
  components: {
   },
  name: "pieChartRadius",
  props: {
   
    valBox: Object
  },
  data() {
   
    return {
   
      pieVal: {
    //环形图模拟数据
        title: "员工占比", //中间title文字
        subTitle: "75人", //中间底部文字
        pieList: [
          //环形图数据
          {
    name: "正式员工", value: 25 },
          {
    name: "试用期员工", value: 28 },
          {
    name: "实习期员工", value: 29 },
          {
    name: "其他", value: 2 },
          {
    name: "后厨", value: 3 }
        ],
        colorList: [
          //环形图颜色
          "#ffb22b",
          "#1779ee",
          "#29e2b0",
          "#7b8c74",
          "#1DB6C5",
          "#fcc525",
          "#fb9712",
          "#26c6da",
          "#1e88e5",
          "#eeeeee"
        ],
        afterSeries: [], //绘制环形饼图的数据
        nameList: [],
        totalNum: 0
      }
    };
  },
  computed: {
   },
  filters: {
   },
  watch: {
   },
  created() {
   },
  mounted() {
   
    // console.log("NDD打印-传递来的饼图数据");
    // console.log(this.valBox);
    // if (this.valBox.chartVal) {
   
    //   this.pieVal = this.valBox.chartVal;
    //   this.phontoImage();
    // }
    this.dataProcessing();
  },
  methods: {
   
    dataProcessing() {
   
      this.pieVal.pieList.forEach((item, index) => {
   
        let seriesVal = {
   
          type: "bar",
          data: [0, 0, 2],
          coordinateSystem: "polar",
          barMaxWidth: 25, //圆环的宽度
          roundCap: true,
          name: "正式员工",
          color: "#ffb22b",
          stack: "a"
        };
        seriesVal.data[2] = Number(item.value);
        seriesVal.name = item.name;
        seriesVal.color = this.pieVal.colorList[index];
        this.pieVal.totalNum += Number(item.value);
        this.pieVal.nameList.push(item.name); //获取名称数组
        this.pieVal