本文介绍sEcharts如何实现自定义仪表盘
之前写了一篇关于如何使用gpt来高效日常工作
在Echarts的官网找到一个来进行代替，对这个示例进行一下改造，可以我们的目标实现的效果是没有刻度和中间指针等效果的，所以第一步需要先去掉刻度和指针等参数
如果我们需要对仪表盘的某些配置进行查询，第一建议是直接使用GPT，因为你可以省去很多查文档的时间，但因为GPT的 智商也有待考验，所以某些配置描述的不是很清楚，第二步再去查询对应的文档，在配置项这个模块里面包含了各种配置的 一些参数，我们直接到仪表盘这个参数，series-gaugeData
kotlin
找到三个参数pointer，anchor，axisLabel，splitLine并且把data值去掉，我们不需要data值
后续我们直接用detail来替代
分别表示 指针，原点，对于仪表盘来说他其实就是在画一个圆，axisLabel表示刻度的标签，spliLine表示刻度的分割线， 把这些都去掉之后就剩下一个光秃秃的圆盘了，现在需要根据设计来加上对应的功能
axisLine是整个曲线轴，其实图中这段圆弧分成了两部分，一部分是曲线轴，另一部分是进度，也就是另外一个参数 process参数,由于目标前后都是圆的，所以这里需要用到axisline的参数roundCap，
实现进度条渐变
对于进度条来说可能进度的颜色是一个UI常常需要你开发的点，这里我们用到线性渐变来对进度条的颜色做一个实现 要有进度的前提是需要先设置一下data的value，加上了data就会默认显示detail的数据，会有一个默认的data进度'50'，出现在下方，这里只需要对detail的show改成false即可
js
progress: {
show: true,
width: 16,
roundCap: true,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'red' },// 0% 处的颜色
{ offset: 1, color: 'blue' }// 100% 处的颜色
]
}
},
},
data: [
{
value:50
}
]
半圆弧实现
仪表盘其实是一个圆形，可以根据开始角度和结束角度来绘制想要的弧度。
现在上图线上的是一个150度的圆弧，可以看出起点是在三点钟方向，以顺时针方向开始绘制
所以当我们想实现一个180度的圆弧的时候，只需要去控制一下仪表盘的开始弧度，以及结束的弧度。
js
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,即可实现半圆的弧形，从参数可以看出我们的圆弧是从180度到0度的一个弧形。
文字定位实现
如果我们把detail的show属性设置为true，那么就会发现detail的位置是位于圆形的下方，
现在我们需要自定义样式，改成上下两行，并且调整他的位置，需要用到detail.rich属性
js
detail: {
formatter: '{line2|206236}\n{line3|在线用户数(人)}',
rich: {
line2: {
fontSize: rtp * 0.45,
fontWeight: 800,
color: '#3A92E1'
},
line3: {
fontSize: rtp * 0.35,
color: '#60D0FD',
borderColor: '#60D0FD', // 边框颜色
borderWidth: 1, // 边框宽度
padding: [rtp * 0.1, rtp * 0.2],
borderRadius: 50
}
},
},
先来解析一下个formatter和rich
formatter是一个文字模版，包含了两行文字并且换行，rich则是一些文字的样式
然后解决文字的定位问题，让文字偏移到弧形的正下方。
当加上offsetCenter属性的时候，是一个数组0,0表示处于圆心处。
js
offsetCenter: [0, '-20%']借助百分比实现到圆心的上方。
最终效果
