echart图表之圆盘 pie 单盘 带有刻度的圆盘满盘
2023-12-21 12:55:22
效果展示:
代码:
//首页整圆有刻度
export const piePulpAngle = (params) => {
let val = params ? params.value : 130
let titleText = params ? params.title : '标题'
let option = {
backgroundColor: '#fff',
color: '#fff',
tooltip: {
show: false
},
grid: {
left: '0%',
right: '0%',
bottom: '10%',
top: '0%',
containLabel: true,
borderWidth: '0'
},
title: {
// text: "桨角",
text: titleText,
x: 'center',
y: '30%',
textStyle: {
fontSize: '28rpx',
color: '#000'
}
},
series: [
{
name: "最外部进度条",
type: "gauge",
radius: '100%',
// radius: ['90%', '100%'],
startAngle: '90',
endAngle: '-269.999',
splitNumber: 12,
axisLine: {
lineStyle: {
color: [
[val / 360, new _echarts.graphic.LinearGradient(
0, 1, 0, 0, [{
offset: 1,
color: 'rgba(67, 122, 203, 1)',
}, {
offset: 0.5,
color: 'rgba(67, 122, 203, 1)',
},
{
offset: 0,
color: 'rgba(67, 122, 203, 1)',
}
]
)],
[
1, 'RGBA(218, 226, 238, 1)'
]
],
width: 7,
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
show: false,
},
detail: {
show: false
},
title: {
show: false,
},
data: [{
value: val,
}],
pointer: {
show: false,
},
animationDuration: 4000,
},
{
name: '刻度',
type: 'gauge',
radius: '86%',
startAngle: "90",
endAngle: "-269.999",
splitNumber: 8,
z: 8,
min: 0,
max: 360,
axisLine: {
show: true,
lineStyle: {
width: 2,
color: [
[1, 'RGBA(176, 199, 233, 1)']
],
// shadowColor: 'pink',
// shadowBlur: 15
}
},
pointer: {
show: false,
},
axisTick: {
show: true,
splitNumber: 5,
length: 4,
distance: 2,
lineStyle: {
color: 'RGBA(204, 204, 204, 1)',
width: 1,
}
},
axisLabel: {
distance: -2,
formatter: function (v) {
v = v.toFixed();
switch (v + '') {
// case '-45':
// return '315';
// case '-90':
// return '270';
// case '-135':
// return '225';
// case '-180':
// return '180';
// case '-225':
// return '135';
// case '-270':
// return '90';
// case '-315':
// return '45';
// case '-360':
// return '0';
case '0':
return '0';
case '45':
return '45';
case '90':
return '90';
case '135':
return '135';
case '180':
return '180';
case '225':
return '-135';
case '270':
return '-90';
case '315':
return '-45';
case '360':
return '0';
}
},
textStyle: {
color: '#000',
fontSize: 10,
}
},
splitLine: {
show: true,
length: 12,
distance: 2,
lineStyle: {
color: 'RGBA(204, 204, 204, 1)',
width: 1,
}
},
detail: {
show: false,
textStyle: {
fontSize: "14",
color: 'pink'
}
},
title: {
show: true,
},
data: [{
value: val
}]
},
{
name: '指针',
type: "gauge",
radius: "84%",
startAngle: "90",
endAngle: "-269.999",
min: 0,
max: 360,
splitNumber: 12,
pointer: {
show: true,
width: 6,
length: '100%',
},
itemStyle: {
color: 'RGBA(68, 122, 203, 1)',
// borderColor: 'RGBA(157, 186, 228, 1)',
// shadowColor: 'RGBA(222, 231, 246, 1)',
// shadowBlur: 10,
// shadowOffsetX: 2,
// shadowOffsetY: 2
},
detail: {
show: true,
offsetCenter: [0, '30%'],
textStyle: {
fontSize: 18,
color: 'RGBA(0, 203, 224, 1)',
},
formatter: function (params) {
return `${params}°`
},
rich: {
name: {
fontSize: 14,
lineHeight: 30,
color: '#000',
fontWeight: '300',
},
},
},
axisLine: {
show: false,
lineStyle: {
color: [
[1, "RGBA(68, 122, 203, 1)"]
],
width: 20,
opacity: 1,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
data: [{
value: val,
}],
markPoint: {
data: [{
x: "50%",
y: "50%",
symbol: 'circle',
symbolSize: 16,
itemStyle: {
color: 'RGBA(102, 147, 212, 1)'
},
}, {
x: "50%",
y: "50%",
symbol: 'circle',
symbolSize: 12,
itemStyle: {
color: "#fff"
},
}]
},
},
]
}
return option
}
?传参参考:
let rud1={
title: '左桨角',
name: 'r/min',
value: 48,
unit: '',
pos: ['25%', '50%'],
rangeMax: 360
}
文章来源:https://blog.csdn.net/weixin_45024453/article/details/135127439
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!