const value = 79;
const meterOption = ref({
title: [
{
text: value+'%',
subtext:'体温指数',
y: "38%",
x: "center",
textStyle: {
fontSize: 27,
fontFamily: 'PangMenZhengDao-Regular, PangMenZhengDao',
color: "#ffffff",
},
subtextStyle: {
fontSize: 14,
color: "#ffffff",
},
},
],
series: [
{
type: "pie",
color: ["transparent", 'transparent','transparent'],
startAngle: 180,
center: ["50%", "70%"],
radius: ['115%', '130%'],
hoverAnimation: false,
labelLine: {
show: false
},
data: [
{
name: "外圈渐层",
value: value,
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0,0,1,0,[
{
offset: 0,
color: "rgba(19, 42, 90, 0.4)",
},
{
offset: 1,
color: "rgba(1, 171, 243, 0.9)",
},
],false),
},
},
},
{ //圆球
name: "",
value: 5,
label: {
rotate: 90,
position: 'inside',
width: 10,
height: 10,
backgroundColor: '#fff',
borderRadius: 10,
borderWidth: 4,
borderColor: 'rgba(11, 189, 244, 0.89)',
shadowColor: 'rgba(11, 189, 244, 0.89)',
shadowBlur: 4,
shadowOffsetY: 2
},
},
{ //画剩余的刻度圆环
name: "",
value: 100 - value,
itemStyle: {
color: 'rgba(1, 171, 243, 0.20)'
},
},
{ //画剩余的刻度圆环
name: "",
value: 100,
}
]
}
]
})
echarts 半圆进度球
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1744.html
相关文章
-
写在 $(function(){}) 中的函数无法被外界调用原因及解决方式
-
jquery中的ajax方法怎样通过JSONP进行远程调用
-
前端原生代码打包成.exe文件,HTML css js jquery打包EXE文件
-
基于html css javascript jquery bootstarp响应式的鲜花预订网电商模板(21页)
-
html css网页制作成品——HTML静态网页作业html css javascript jquery水果商城7页
-
Jquery的基本认识
-
BCSP-玄子前端开发之JavaScript jQuery入门CH02_JavaScript函数
-
浏览器调用摄像头
-
JQuery实现切换效果【排他思想】
-
echarts:实现3D柱状图 柱状图渐变颜色设置
发布的文章
写在 $(function(){}) 中的函数无法被外界调用原因及解决方式
2024-02-25 11:02:42
jquery中的ajax方法怎样通过JSONP进行远程调用
2024-02-25 11:02:39
前端原生代码打包成.exe文件,HTML css js jquery打包EXE文件
2024-02-25 11:02:33
基于html css javascript jquery bootstarp响应式的鲜花预订网电商模板(21页)
2024-02-25 11:02:26
html css网页制作成品——HTML静态网页作业html css javascript jquery水果商城7页
2024-02-25 11:02:17
Jquery-day01
2024-02-25 11:02:14
Jquery的基本认识
2024-02-25 11:02:11
BCSP-玄子前端开发之JavaScript jQuery入门CH02_JavaScript函数
2024-02-25 11:02:10
浏览器调用摄像头
2024-02-25 11:02:09
JQuery实现切换效果【排他思想】
2024-02-25 11:02:07
大家推荐的文章