vue代码如下：
<template> <div class="pie" @click="changeTurns"> <span class="innerPie"></span> </div></template><script> export default { name: "echarts", data() { return { count: 0 }; }, methods:{ changeTurns(){ // document.styleSheets[1].addRule('.pie::before','transform: rotate(.5turn)'); this.count = this.count + 0.1 let outDom = document.getElementsByClassName('pie')[0] let innerDom = document.getElementsByClassName('innerPie')[0] // let cssDom = window.getComputedStyle(turnDom, '::before').getPropertyValue('transform'); if(this.count > 0.5){ //这里是比较笨的方式 outDom.style.backgroundColor = "red" outDom.style.backgroundImage = "linear-gradient(to right, transparent 50%, #FFFFFF 0)" } innerDom.style.transform = `rotate(${this.count}turn)` } } }</script><style scoped> .pie { width: 100px; height: 100px; border-radius: 50%; /* background: red; */ background-color: #FFFFFF; border: 1px solid rgb(252, 11, 11); background-image: linear-gradient(to right, transparent 50%, red 0); /* background-image: linear-gradient(to right, transparent 50%, #FFFFFF 0); */} .innerPie { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; transform: rotate(0.25turn); /* 90deg就是0.25turn。也就是写 transform: rotate(1turn)；等价于 transform: rotate(360deg); */}</style>
效果如下：
