echarts实现评分水球+环形图_echarts得分环-优快云博客

这篇博客展示了如何利用ECharts库创建一个动态的水波图，该图用于显示分数占比。配置中定义了满刻度大小、分数及其占满刻度的比例，并通过线性渐变设置水波颜色。此外，还包含了外环线来展示剩余刻度，以及自定义标签和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//基本配置如下

var max = 500; //满刻度大小
var scroe = 80,scroePer=scroe/100;
var data = max * scroePer;
option = {
backgroundColor:'#fff',
title: {
top: '47%',
left: 'center',
text: scroe + ' 分',
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: 32
}
},
series: [{
type: 'liquidFill',
itemStyle: {
opacity:0.8,//波浪的透明度
shadowBlur: 10,//波浪的阴影范围
shadowColor:'#FFB931'//阴影颜色
},
radius:'80%',
//水波
color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#FE8704"
},
{
offset: 1,
color: '#FFB931'
}
])],
data: [{
value: scroePer,
}],
// background: '#000',
center: ['50%', '50%'],
backgroundStyle: {
color: '#fff'
},
label: {
normal: {
formatter: '',
textStyle: {
fontSize: 12
}
}
},
outline: {
itemStyle: {
borderColor: 'transparent',
borderWidth: 5
},
borderDistance: 0
}
},
//外环线
{
"color": ['#FF8B00', 'transparent'],
"type": "pie",
"center": ["50%", "50%"],
"radius": ["80%", "82%"],
"hoverAnimation": false,
"data": [{
"name": "",
"value": data,
"label": {
"show": false,
"position": "center",
"color": "#fff",
"fontSize": 38,
"fontWeight": "bold",
"formatter": function(o) {
return data
}
}
},
{ //画剩余的刻度圆环
"name": "",
"value": max - data,
"label": {
show: false
},
labelLine: {
show: false
}
}
]
}
]
};