echarts实现评分水球+环形图

最新推荐文章于 2025-10-06 06:51:34 发布

原创最新推荐文章于 2025-10-06 06:51:34 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

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

//基本配置如下

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
}
}
]
}
]
};