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
相关链接
您阅读本篇文章共花了： 大家都在找：
echarts：echarts怎么读
前端：前端面试题
javascript：javascript 菜鸟教程
发表评论