echarts饼图（带动画效果）下面附有源码
实现思路
1、外围圆环运用仪表盘gauge，设置仪表盘的起始角度“startAngle”，和终止角度“endAngle”，设置仪表盘最小值“min”和最大值“max”属性来确定仪表盘数值大小， 隐藏仪表盘指针‘pointer’，隐藏detail，设置仪表盘外维宽度和颜色“axisLine”，隐藏刻度“axisTick”，设置进度条progress属性，隐藏刻度标签“axisLabel”，itemStyle属性设置渐变色
2、中间旋转的轮毂也是运用仪表盘来制作的，将仪表盘其他属性隐藏只保留刻度线，给刻度线添加阴影，动态修改角度就能实现旋转效果。
3、发光线是运用pie类型来实现，修改data中的值的大小，和itemStyle样式来实现发光线。
4、中间的球也是运动pie类型实现，修改itemStyle颜色改为径向渐变就可以了
示例代码
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 10px">
<div id="container" style="width: 50%;height: 70%;margin-top: 10px"></div>
<script type="text/javascript" src="./echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
let value = 20.2345;
let title = '轮胎磨损度';
let int = value.toFixed(2).split('.')[0];
let float = value.toFixed(2).split('.')[1];
var option = {
backgroundColor: '#020f18',
title: {
text: '{a|' + int + '}{b|.' + float + '}\n{c|' + title + '}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 48,
color: '#fff',
fontWeight: '600',
},
b: {
fontSize: 20,
color: '#fff',
padding: [0, 0, 14, 0]
},
c: {
fontSize: 20,
color: '#fff',
padding: [5, 0]
}
}
}
},
series: [
{
type: 'gauge',
name: 'gauge1',
radius: '70%',
clockwise: true,
startAngle: '90', // 仪表盘起始角度 正上方为90度
endAngle: '-360', // 仪表盘结束角度 360度
min: 0,
max: 360,
pointer: { // 隐藏仪表盘指针
show: false,
},
detail: {
show: false,
},
axisLine: { // 仪表盘最外圈宽度颜色设置
lineStyle: {
width: 30,
color: [
[0, '#173c5e'],
[1, '#173c5e']
],
shadowColor: 'rgba(33, 174, 234, 0)',
shadowBlur: 0,
}
},
axisTick: { // 隐藏刻度
show: false
},
progress: { //当前进度条
show: true,
roundCap: true,//是否在两端显示成圆形
width: 30
},
// 画中间分割线
splitLine: {
show: false,
},
axisLabel: { //隐藏刻度标签
show: false
},
itemStyle: {
shadowBlur: 20,
shadowColor: '#58D9F988',
color: { // 线颜色设置为线性渐变
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#58D9F955' // 0% 处的颜色
}, {
offset: 1, color: '#58D9F9' // 100% 处的颜色
}],
global: false // 缺省为 false
},
},
data: [
{
value: value
}
]
},
{ // 画中间齿轮
type: 'gauge',
name: 'gauge2',
radius: '65%',
clockwise: true,
startAngle: '0', // 仪表盘起始角度 正上方为90度
endAngle: '-360', // 仪表盘结束角度 360度
min: 0,
max: 360,
splitNumber: 20, // 仪表盘分割线
pointer: { // 隐藏仪表盘指针
show: false,
},
detail: {
show: false,
},
axisLine: { // 仪表盘最外圈宽度颜色设置
show: false,
},
axisTick: { // 隐藏刻度
show: false
},
progress: { //当前进度条
show: false,
},
// 画中间分割线
splitLine: {
show: true,
length: 90,
lineStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 255, 255, 1)',
shadowOffsetY: '0',
color: '#020f18',
width: 2
}
},
axisLabel: { //隐藏刻度标签
show: false
},
itemStyle: {
show: false,
}
},
{ //发光线
type: 'pie',
radius: ['53%', '53%'],
hoverAnimation: false,
clockWise: false,//饼图的扇区是否是顺时针排布
itemStyle: {
normal: {
color: '#0C355E'
}
},
label: {
show: false
},
data: _dataArr()
},
{ //中间圆球
type: 'pie',
radius: [0, '30%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: '#000',
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: '#0FF',
}, {
offset: 1,
color: '#060f20'
}])
}
},
label: {
show: false
},
data: [1]//数字随便只要是一个值就行
},
]
};
myChart.setOption(option);
function _dataArr() {
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 2 === 0) {
dataArr.push({
value: 20,
itemStyle: {
normal: {
color: 'rgb(0,255,255,.3)',
}
}
})
} else {
dataArr.push({
value: 20,
itemStyle: {
normal: {
color: 'rgb(0,0,0,0)',
borderWidth: 5,
borderColor: "rgba(0,255,255,1)",
}
}
})
}
}
return dataArr
}
var startAngleNum = 0;
function startAngle() {
let option = myChart.getOption();
if (startAngleNum > 360) {
startAngleNum = 0
} else {
startAngleNum = startAngleNum + 1
}
option.series[1].startAngle = startAngleNum;
myChart.setOption(option, true);
}
function startTimer() {
timer = setInterval(startAngle, 20);
}
// 一定要等全部加载完在开始动画
setTimeout(startTimer, 1500);
</script>
</body>
</html>