vue+echarts 圆角环形图

不知道为啥我这里圆角不好使，贴一下代码吧

<template>
  <div class="online-rate">
    <el-header>
      <div class="header-title">
        <div id="rectangle"></div>
        隐患
      </div>
    </el-header>
    <div class="chart-content">
      <div class="left-part">
        <div class="inspection">
          <inspectionChart />
        </div>
        <div class="train">
          <trainChart />
        </div>
      </div>
      <div class="center-part">
        <hiddenDangerChart />
      </div>
      <div class="right-part">
        <div class="deal">
          <dealDangerChart />
        </div>
        <div class="drill">
          <drillChart />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import resize from "../mixins/resize";
import inspectionChart from "@/views/dashboard-new/treacherous/inspectionChart";
import trainChart from "@/views/dashboard-new/treacherous/trainChart";
import hiddenDangerChart from "@/views/dashboard-new/treacherous/hiddenDangerChart";
import dealDangerChart from "@/views/dashboard-new/treacherous/dealDangerChart";
import drillChart from "@/views/dashboard-new/treacherous/drillChart";

export default {
  name: "treacherous",
  data() {
    return {
      num: 0,
      sortRules: "",
      sortRulesOptions: [
        { value: "0", label: "按系统" },
        { value: "1", label: "按时间" },
      ],
    };
  },
  components: {
    inspectionChart,
    trainChart,
    hiddenDangerChart,
    dealDangerChart,
    drillChart,
  },
  mixins: [resize],
  props: {},
  mounted() {
    this.sortRules = "0";
  },
  methods: {
    tab(index) {
      this.num = index;
    },
    moreInfo() {
      this.$router.push({ path: "/infra/device" });
    },
  },
};
</script>

<style lang="scss" scoped>
.online-rate {
  position: relative;
  text-align: center;
  //overflow: hidden;
  //float: left;
  height: 100%;
  width: 100%;

  .el-header {
    height: 14% !important;
    width: 100%;
    padding: 0 4%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
  }
  .header-title {
    width: 170px;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    float: left;
  }
  .chart-content {
    width: 100%;
    height: 86%;
    padding:  4%;
    .left-part {
      width: 30%;
      height: 100%;
      float: left;
      .inspection {
        height: 45%;
        width: 95%;
        margin-bottom: 10%;
      }
      .train {
        height: 45%;
        width: 95%;
      }
    }
    .center-part {
      width: 40%;
      height: 100%;
      float: left;
    }
    .right-part {
      width: 30%;
      height: 100%;
      float: left;
      .deal {
        height: 45%;
        width: 95%;
        margin-bottom: 10%;
      }
      .drill {
        height: 45%;
        width: 95%;
      }
    }
  }
}
</style>

参考官网例子：
https://www.makeapie.com/editor.html?c=xuyO-o_wd