特性：

1. 可以设置椭圆轨迹宽度、高度 
2. 可以设置椭圆轨迹旋转角度，并且自动纠偏菜单文字水平状态
3. 可以设置运动轨迹坐标移动步长
4. 可以设置运动轨迹改变频率
5. 可以设置顺时针还是逆时针旋转

---

sgOvalMenu源码 

<template>
    <div :class="$options.name" :style="style">
        <div class="ovalMenuBtn" v-for="(a, i) in menubtns" :key="i" :style="a.style" @click="$emit(`click`, a);">
            <slot :data="a"></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: 'sgOvalMenu',
    data() {
        return {
            style: {},
            coordinates: [],
            step_: 0,//按钮在椭圆轨道上面移动的步长
            time_: 0,//按钮坐标变化的时间间隔
            interval: null,
            menubtns: [],
        }
    },
    props: [
        "width",//椭圆的长直径
        "height",//椭圆的短直径
        "rotate",//椭圆旋转角度
        "step",//按钮在椭圆轨道上面移动的步长
        "time",//按钮坐标变化的时间间隔
        "clockwise",//顺时针运动（boolean）
        "data",//椭圆上面的按钮数据
    ],
    watch: {
        width: {
            handler(d) {
                this.style.width = `${d || 800}px`;
            }, deep: true, immediate: true,
        },
        height: {
            handler(d) {
                this.style.height = `${d || 400}px`;
            }, deep: true, immediate: true,
        },
        rotate: {
            handler(d) {
                this.style.rotate = `${d || 0}deg`;
                this.setProperty();
            }, deep: true, immediate: true,
        },
        step: {
            handler(d) {
                this.step_ = d || 2;
            }, deep: true, immediate: true,
        },
        time: {
            handler(d) {
                this.time_ = d || 200;
            }, deep: true, immediate: true,
        },
        data: {
            handler(d) {
                if (d) {
                    this.menubtns = JSON.parse(JSON.stringify(d));
                    this.getCoordinates(d => {
                        this.coordinates = d;
                        this.triggerAnimate();
                    });
                }
            }, deep: true, immediate: true,
        },
    },
    destroyed() {
        clearInterval(this.interval);

    },
    created() {
    },
    mounted() {
        this.setProperty();
    },
    computed: {

    },
    methods: {
        setProperty() {
            this.$el && this.$el.style.setProperty("--rotate", `${-1 * parseFloat(this.style.rotate || 0)}deg`); //js往css传递局部参数
        },
        triggerAnimate() {
            clearInterval(this.interval);
            this.interval = setInterval(() => {
                this.setStyles();
            }, this.time_);
            this.setStyles();
        },
        setStyles() {
            let coordinateStep = this.coordinates.length / this.menubtns.length;
            let arr = this.coordinates, N = this.step_;
            if (this.clockwise || this.clockwise === '') {
                //前面N个元素挪到最后
                arr.splice(arr.length - 1, 0, ...arr.splice(0, N));
            } else {
                //最后N个元素挪到前面
                arr.splice(0, 0, ...arr.splice(arr.length - N));
            }
            this.coordinates = arr;
            this.menubtns.forEach((v, i) => {
                let coordinate = this.coordinates[i * coordinateStep];
                this.$set(v, "style", {
                    left: `${coordinate.x}px`,
                    top: `${coordinate.y}px`,
                });
            });
        },
        getCoordinates(cb) {
            let a = parseFloat(this.style.width) / 2;
            let b = parseFloat(this.style.height) / 2;
            this.getCPoint(a, b, 1, a, b, cb);
        },
        // a 长半径， b 短半径， p 节点的间隔 ， cx, cy 圆心, 
        getCPoint(a, b, p = 1, cx = 0, cy = 0, cb) {
            const data = []
            for (let index = 0; index < 360; index = index + p) {
                let x = a * Math.cos(Math.PI * 2 * index / 360)
                let y = b * Math.sin(Math.PI * 2 * index / 360)
                data.push({ x: x + cx, y: y + cy })
            }
            cb && cb(data);
        },
    }
};
</script>    
<style lang="scss" scoped>
$rotate: var(--rotate);

.sgOvalMenu {
    border: 2px dashed #eee;
    border-color: #66b1ff66 #66b1ffAA #66b1CC #66b1ff;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transition: .382s linear;

    .ovalMenuBtn {
        white-space: nowrap;
        position: absolute;
        width: max-content;
        height: max-content;
        left: 0;
        top: 0;
        transform: translate(-50%, -50%) rotate($rotate);
        transform-origin: center;
        // transition: left .618s, top .618s, filter .382s;
        transition: .382s;
        pointer-events: auto;
        color: white;
        cursor: pointer;

        &:hover {
            filter: brightness(1.1);
        }
    }
}
</style>

应用

<template>
  <div :class="$options.name">
    <!-- 椭圆菜单 -->
    <sgOvalMenu :data="ovalMenus" @click="clickOvalMenu" :width="700" :height="200" :rotate="30" clockwise>
      <template v-slot="scope">
        <div class="btn">
          {{ scope.data.label }}
        </div>
      </template>
    </sgOvalMenu>
  </div>
</template>
  
<script>
import sgOvalMenu from "./sgOvalMenu";
export default {
  name: 'sgBody',
  components: { sgOvalMenu },
  data() {
    return {
      ovalMenus: [
        { value: '1', label: '显示文本1', },
        { value: '2', label: '显示文本2', },
        { value: '3', label: '显示文本3', },
        { value: '4', label: '显示文本4', },
        { value: '5', label: '显示文本5', },
      ],
    }
  },
  methods: {
    clickOvalMenu(d) {
      console.log(`获取点击信息：`, JSON.stringify(d, null, 2));
    },
  }
};
</script>
  
<style lang="scss" scoped>
.sgBody {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;

  .btn {
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 88px;
    box-sizing: border-box;
    border: 1px solid #409EFF;
    box-shadow: 0 10px 30px #409EFFAA, 0 10px 30px #409EFF99 inset;
    color: #409EFF;
    cursor: pointer;
    transition: .382s;

    &:hover {
      box-shadow: 0 10px 30px #409EFFAA, 0 10px 30px #409EFF99 inset;
      background-color: #409EFF;
      color: black;
      filter: brightness(1.3);
    }
  }
}
</style>