option = {
series: [
{
type: 'gauge',
radius:'90%',
center: ['50%', '57%'],
splitNumber: 5, //仪表盘刻度的分割段数
itemStyle: {
color: '#6EBEFF', //颜色
},
progress: {
show: true,
roundCap: true, //是否在两端显示成圆形
width: 3 //表盘原型环阴影宽度
},
axisLine: {
roundCap: true, //是否在两端显示成圆形
lineStyle: {
width: 3 //表盘圆型环宽度
}
},
axisTick: {
show: false //秒刻度
},
splitLine: {
length: 3, //刻度线长度
distance: 0, //刻度线距离圆环的距离
lineStyle: {
width: 1, //刻度线宽
color: '#fff' //刻度线颜色
}
},
axisLabel: {
distance: -21, //仪表盘数字定位
color: '#fff', //仪表盘数字颜色
fontSize: 12 //仪表盘数字大小
},
anchor: {
show: true,
showAbove: true,
size: 10, //表盘圆内心大小
},
title: {
show: true,
offsetCenter: [0, '75%'], //表盘动态数值距离圆心的位置
color: '#F3D824', //仪表盘数字颜色
fontSize: 20, //仪表盘数字大小
fontWeight: 'bold',
},
pointer:{
show:true,
length: "50%", // 指针长度
width: 2, // 指针宽度
itemStyle: { // 仪表盘样式
color: '#fff', // 指针颜色,默认取数值所在的区间的颜色
}
},
detail: {
valueAnimation: true,
fontSize: 14, //表盘动态数值文字大小
offsetCenter: [0, '50%'], //表盘动态数值距离圆心的位置
color:'#fff', //表盘文字颜色
formatter:'{value}%' //value自定义
},
data: [
{
value: this.instrumentDataList[0].value, //表盘动态数值
name:this.instrumentDataList[0].name,
}
]
},
{
type: 'gauge',
radius:'75%', //内圆环
center: ['50%', '57%'],
itemStyle: {
color: '#fcc129', //颜色
shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色
shadowBlur: 10, //图形阴影的模糊大小
shadowOffsetX: 2, //阴影水平方向上的偏移距离
shadowOffsetY: 2 //阴影垂直方向上的偏移距离
},
progress: {
show: true,
width: 40, //表盘原型环阴影宽度
itemStyle: {
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#fce426' // 0% 处的颜色
},
{
offset: 1,
color: '#ff0000' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
anchor: {
show: false
},
title: {
show: false
},
pointer:{
show:false
},
detail: {
show:false
},
data: [
{
value: this.instrumentDataList[0].value, //表盘动态数值
name:this.instrumentDataList[0].name,
}
]
}
]
};
echarts仪表效果
于 2023-12-14 17:32:48 首次发布