前言
echarts官网
基础配置
看不懂,可以与最后的代码对照看
- startAngle 开始角度
- endAngle 结束角度
- name 鼠标移入显示的名称
- radius 仪表盘的在父级中所占的百分比 类似大小
- center 仪表盘的位置
-
pointer 指针样式
- width 宽度
- length 长度
-
detail 仪表盘中间数据值默认样式
- formatter 数据值 语法类似模板字符串
- textStyle 中间文字的大小
- offsetCenter 中间值的位置
-
title 仪表中间标题的配置
- offsetCenter 标题位置
- axisTick 短刻度样式 与长刻度配置差不多
-
splitLine 长刻度样式
- show 是否显示该刻度
- distance 位置,负数在仪表盘外面,反之在里面
- length 长度
-
lineStyle 刻度样式
- width 宽度
- color 刻度颜色
-
axisLabel 刻度值样式
- distance 位置,负数在仪表盘外面,反之在里面
- color 颜色
- fontSize 字体大小
- color 仪表盘的主体颜色
- data 数据
代码
option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
startAngle: 210, // 开始角度 左侧角度
endAngle: -30, // 结束角度 右侧
name: 'Pressure',
type: 'gauge',
radius: '65%',
progress: {
show: true
},
center: ['50%', '63%'],
pointer: { // 指针样式
width: 3,
length: '60%',
shadowBlur: 5
},
detail: { // 中间数据
valueAnimation: true,
formatter: '{value}%', // 数据值的样式
textStyle: {
fontSize: 14
},
offsetCenter: [0, '70%'] // 中间值的位置
},
title: { // 标题位置
offsetCenter: [0, '45%']
},
axisTick: { // 短刻度样式
show: false // false表示不显示
},
splitLine: { // 长刻度设置
distance: -20, // 位置
length: 8,
lineStyle: {
width: 3,
color: '#bbb'
}
},
axisLabel: { // 刻度值
distance: -20, // 位置
color: '#AAAAAA',
fontSize: 12
},
color: [themeColor],
data: [
{
value: 50,
name: '完成率'
}
]
}
]
}
本文到此结束啦~,喜欢可以点个赞!!