要写两个div让最外层div旋转起来
代码直接复制粘贴,,本博主良心大大滴好
<template>
<div class="pie">
<div id="innerCircle"></div>
<div id="margin"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: '',
props: {},
data() {
return {
numList: { num1: 70, num2: 20, num3: 100 }
};
},
mounted() {
this.innerCircle();
this.margin();
},
methods: {
/**内圆 */
innerCircle() {
const myChart = echarts.init(document.getElementById('innerCircle'));
let color = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#25ABD6' // 0% 处的颜色
},
{
offset: 0.17,
color: '#2494D0' // 100% 处的颜色
},
{
offset: 0.9,
color: '#29C0D8' // 100% 处的颜色
},
{
offset: 1,
color: '#27B3D5' // 100% 处的颜色
}
],
global: false // 缺省为 false
};
const option = { series: [] };
for (let i = 0; i < 3; i++) {
let series = {
name: '第一个圆环',
type: 'pie',
clockWise: false,
radius: [28, 38],
hoverAnimation: false,
itemStyle: {
borderRadius: 60,
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
center: ['12%', '50%'],
data: [
{
value: 10,
label: {
normal: {
rich: {
a: {
color: '#F8FCFF',
align: 'center',
fontSize: 17,
fontWeight: 'bold',
fontFamily: '方正粗倩_GBK'
},
b: {
color: '#F8FCFF',
align: 'center',
fontSize: 12,
padding: [0, 0, 5, 0]
},
c: {
fontSize: 14,
fontFamily: '方正粗倩_GBK',
fontWeight: 'bold'
}
},
formatter: function (params) {
return '{b|金融}' + '\n{a|' + params.value + '}' + ' {c|%}';
},
position: 'center',
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'normal',
color: '#fff'
}
}
},
itemStyle: {
borderWidth: 1,
borderRadius: '50%',
color: color
}
},
{
value: 90,
itemStyle: {
normal: {
color: '#283741',
borderWidth: 1,
borderRadius: '50%'
}
}
}
]
};
if (i == 0) {
series.data[0].value = this.numList.num1; // 第一个内圆
} else if (i == 1) {
series.center = ['43%', '50%']; // 第二个内圆
series.data[0].value = this.numList.num2;
} else {
series.center = ['75%', '50%']; // 第三个内圆
series.data[0].value = this.numList.num3;
}
series.data[1].value = 100 - series.data[0].value;
option.series.push(series);
}
myChart.setOption(option);
},
//**外边框 */
margin() {
const myChart = echarts.init(document.getElementById('margin'));
const option = { series: [] };
for (let i = 0; i < 3; i++) {
let series = {
name: '最外圈小狐线',
type: 'pie',
radius: ['46', '48'],
center: ['12%', '50%'],
startAngle: 90, //默认90,起始角度,支持范围[0, 360]
hoverAnimation: false,
itemStyle: {
borderRadius: 40,
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [
{
value: 35,
itemStyle: {
normal: {
color: '#2F3F59',
borderWidth: 1
}
}
},
{
value: 9,
itemStyle: {
normal: {
color: '#26A4D8',
borderWidth: 3,
borderRadius: '50%'
}
}
},
{
value: 35,
itemStyle: {
normal: {
color: '#2F3F59',
borderWidth: 1
}
}
},
{
value: 15,
itemStyle: {
normal: {
color: '#26A4D8',
borderWidth: 3,
borderRadius: '50%'
}
}
}
]
}; // 第一个外边框
if (i == 1) {
series.center = ['43%', '50%']; // 第二个外边框
} else if (i == 2) {
series.center = ['75%', '50%']; // 第三个外边框
}
option.series.push(series);
}
// 用定时器让他旋转起来
setInterval(() => {
for (let i = 0; i < option.series.length; i++) {
const element = option.series[i];
element.startAngle = element.startAngle - 5;
}
myChart.setOption(option);
}, 100);
}
}
};
</script>
<style lang="scss" scoped>
.pie {
position: relative;
}
#innerCircle {
width: 400px;
height: 96px;
}
#margin {
top: 0px;
width: 400px;
height: 96px;
position: absolute;
}
#echarts2 {
width: 96px;
height: 96px;
margin-left: 40px;
}
#echarts3 {
width: 96px;
height: 96px;
margin-left: 40px;
}
</style>