echarts仪表盘进度条、指针动态渐变色显示
1. echarts仪表盘实现效果如下
2. 配置项代码：
const option = {
// 鼠标悬浮的提示
tooltip: {
formatter: {b} : {c}
},
series: [
{
type: gauge,
min: 0, //最大值
max: 100, //最小值
startAngle: 200, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
endAngle: -20, //仪表盘结束角度
splitNumber: 5, //仪表盘刻度的分割段数
itemStyle: {
color: #f37215, //颜色
shadowColor: rgba(0,138,255,0.45), //阴影颜色
shadowBlur: 10, //图形阴影的模糊大小
shadowOffsetX: 2, //阴影水平方向上的偏移距离
shadowOffsetY: 2 //阴影垂直方向上的偏移距离
},
progress: {
show: true, //是否显示进度条
roundCap: true, //是否在两端显示成圆形
width: 18, //进度条宽度
itemStyle: {
color: {
type: linear,
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: #f12711 // 0% 处的颜色
},
{
offset: 1,
color: #f5af19 // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
pointer: {
show: true, //是否显示指针
itemStyle: {
color: {
type: linear,
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: #f12711 // 0% 处的颜色
},
{
offset: 1,
color: #f5af19 // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
axisLine: {
show: true, //是否显示仪表盘轴线
roundCap: true, //是否在两端显示成圆形
lineStyle: {
width: 18 //轴线宽度
}
},
axisTick: {
show: true, //是否显示刻度
distance: -29,
itemStyle: {
color: #fff,
width: 2
}
},
splitLine: {
show: true, //是否显示分隔线
distance: -30
},
axisLabel: {
show: true, //是否显示标签
distance: -10
},
title: {
show: true, //是否显示标题
fontSize: 20
},
detail: {
show: true, //是否显示详情
valueAnimation: true, //是否开启标签的数字动画
borderRadius: 8, //文字块的圆角
offsetCenter: [0, 70%], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比
fontSize: 50, //文字的字体大小
fontWeight: bolder, //文字字体的粗细
formatter: {value}, //格式化函数或者字符串
color: auto //文本颜色
},
data: [
{
value: 90,
name: 高危
}
]
}
]
};
注意：echarts仪表盘不支持dataset