echart环形进度条,底窄上宽,进度未尾有图形
如图
直接上代码
let chartData = {
value: 90,
total: 100
};
let max = chartData.total;
let value = chartData.value;
var option = {
title: [
{
top: "40%",
left: "center",
text: value + "{b|分}",
textStyle: {
color: "#00a464",
fontSize: 26,
fontWeight: 700,
rich: {
b: {
color: "#00a464",
fontSize: 12,
fontWeight: 700
}
}
}
},
{
top: "55%",
left: "center",
text: "总分:1000分",
textStyle: {
color: "#222B29",
fontSize: 12,
fontWeight: 700
}
}
],
angleAxis: {
axisLine: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
max: 100,
startAngle: 100
},
radiusAxis: {
type: "category",
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true
},
data: []
},
polar: {
radius: "130%",
center: ["50%", "50%"]
},
series: [
// 极坐标系下柱状图
// 实际值
{
type: "bar",
data: [value],
z: 1,
coordinateSystem: "polar",
barMaxWidth: 15,
name: "出租率",
roundCap: 1,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.5,
color: "rgba(72, 195, 124, 1)"
},
{
offset: 0,
color: "rgba(117, 214, 138, 0.9)"
}
])
},
// 背景图形
{
type: "pie",
data: [
{
name: "",
value: value,
labelLine: {
show: false,
emphasis: {
show: false
}
}
}
],
z: 0,
silent: true,
radius: ["60.5%", "68.5%"],
roundCap: true,
color: "rgba(145,145,145,0.4)",
barGap: "-100%"
},
// 尾端小圆点 饼图
{
type: "pie",
radius: ["65%", "65%"],
hoverAnimation: false,
startAngle: 100,
endAngle: 0,
silent: 1,
z: 10,
data: [
{
name: "",
value: value,
itemStyle: {},
label: {
show: true,
position: "center",
color: "#fff",
fontSize: 38,
fontWeight: "bold",
formatter: function(o) {
// return data
}
},
labelLine: {
show: false,
emphasis: {
show: false
}
}
},
{
//画中间的图标
name: "",
value: 0,
label: {
position: "inside",
backgroundColor: {
image:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANfSURBVHgBxZfPixRHFMffq+ofO5OZ6O6YGXaToEskIughBHLeg8clt1mQkJAQMARyiGzubu6KF0VYBUUPgnvUP0D/AC8iiCKoKLPO6uyqPdsz3VXVz6qRWbS658fuNvg5zMCrN+/7XnfVqzcIY1C/UecwN1coNbuTvDxRkgQ+KeRmDTmpJKGQh1HH/br0bnnqr7fjxMRRgv5Px6oOyVpfaGRAVLHk3uuovdpaObIUb1v418cXqpwnM+MKZiWQxNi4evif1tjCv7y4+I3TFTXIAdbprF0+uvh8pPCfjXP7Zcj2QY6giFpXDp98OlB4WKWuUOUyRPOc6EcgOIRI08ZOgI/0V0Mi3Nlwv7gJA7Ar3xL+7cG5CrrsQNaP9orunAfylFYpwxB0Eqs6geVBCSSAz68d/Hutl4j5qN9f8phHM1nOFREueiRPjxL9UAVNu0SnpkR4ImudJ8lMnep8S3iyNF0h4p7taAJwSo7DNnEoOVGJw0XbTgy5/+xYdUs4VnFqM02qzrwJADuEQ3L8S/2KbLsTy5qpGn9/cnYvKf872+GrePOmeXSwO4INLPwsXB58bNyQwSMm3FLJ9jbV5iBq6J0E21gtFfYwHlHRXtCbYA5ygpnjZxFJXmZSiZSwPmMzkJcw0ve2jcfgM5elezFS2nnHULoIs7sZfCaYSEjZRtOBICeIei31E1BrMt02opQzwkPISxihYdsSTiFLHC9ILQDehZwQBHdsm+cnIfPb66lRJXD8W3prB7BL9GNefeunLwz5SrVZcGg2tN+zQB50wfkfdomee5Ztm36a0ZUfTr5hK7igSp7TtB3euRO3FbLrsEMksuWsaoWU6+a7d5w29k+uZe3ulls8YwLANlHArq+7xcxqlay93hI2VXPGGllBTIAI+ZJ5XzCaoIvOfy2veCZrEYVaXTmy0Js8Pxl9/nh8/ludVXVQ1D2iM++B7uO6G+lLpNfdegkxeCj0SdgE/5Z9E/VhoEefgxmjTx99TR7Q12QFcgS5HvZmhwx7fUZVvh3sSocKG8zwRy6fZkA+7ADFmJzY7L68dPTfZtb68L8w9294Zae5TzjO1LgJGEEvFq+Ce7XmysKCGuSHMCZmRMK2V1ZFt5BgUtDDgtMXQqZiJ4A2uu03wb3ZcJhgn/ePWX8JsqXMiQAAAABJRU5ErkJggg=="
},
width: 20,
height: 20,
borderRadius: 30,
padding: 10
}
},
{
//画剩余的刻度圆环
name: "",
value: max - value,
label: {
show: false
},
labelLine: {
show: false,
emphasis: {
show: false
}
}
}
]
}
]
};
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现