特性：

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>