大家都知道gpt可以用到很多的地方，笔者尤其喜欢用来让他帮我读取一些比较复杂和冗余的配置文档，有时候会遇到去做某个功能的时候，实现的逻辑很简单，只要你知道某个配置项就行，比如在使用echart的时候，一看官方那么多的示例，而且每个的配置都不一样，配置列表更是很多，并且存在一个情况，翻译过来的配置项名称有时候又和你想的不太一样，要去找到某一个配置项，是非常耗时间的，所以借助gpt来解决配置项的问题，能在很大程度上提高开发效率
参考目标
比如我想要实现一个这样的仪表盘，我应该怎么做，第一反应肯定是从echart的官方找到类似的来进行改造，但是echart的官网有时候不可能给你一个一模一样的示例，所以需要进行配置项的改动
选取目标
在echart官网中选择一个比较类似的仪表盘，最像的应该就是这个速度的仪表盘
echart能提供配置项的实时修改，这是一个比较好的方面，修改了马上就能看到效果
这边也有对应的配置项生成
但是如果你很久没有使用echart，对于这些配置项来说，你是很陌生的，如何快速的知道某个样式对应的配置项，就应该借助gpt来进行实现
实现目标
对于目标而言，我肯定是不要指针的，但我也不想去文档找怎么去掉指针，一是很麻烦，二是他在配置文档中指不定叫什么名字，我是怎么实现一秒就知道配置项的
直接把配置项扔到gpt上，告诉他不要指针，得到的答案是使用pointer配置项
直接应用到实时代码中，就能直接解决
如果你去配置文档中找这个配置项，我不知道你们需要多少的时间，也不知道有什么更加方便的方法去找到这配置项， 在这么的多的配置项中，会浪费很多的时间，但借助gpt直接能一秒找到你需要的配置项。
很多时候有的配置gpt也没有拿到官网最新的数据，可以直接用文档地址去喂它
完整代码如下
以下的代码都是在我没有查阅文档的条件下完成的，相对于使用gpt的情况下，效率确实是很大提升的，当然gpt也会出错，也有可能是你的描述不太清晰，笔者在完成的时候在gpt遇到的问题比较少，反而是有些文档的内容用不了，还是直接查询gpt找到的答案。
js
myChart.setOption({
grid: {
top: '20%' // 设置向下偏移的距离，可以根据实际需要调整
},
series: [
{
type: 'gauge',
startAngle: -180,
endAngle: 0,
radius: '100%',
top: '20%',
progress: {
show: true,
width: 16,
roundCap: true,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#FD9631' },
{ offset: 1, color: '#F96402' }
]
}
},
},
axisLine: {
roundCap: true,
color: '#F96402',
lineStyle: {
width: 16,
color: [
[0, 'rgba(37, 120, 203, 1)'], // 开始位置颜色
[1, 'rgba(31, 106, 185, 0.3)'] // 结束位置颜色
]
},
},
axisTick: {
show: false
},
splitLine: {
show: false,
length: 15,
lineStyle: {
width: 2,
color: '#000000'
}
},
axisLabel: {
show: false,
},
pointer: {
show: false,
},
anchor: {
show: false,
showAbove: true,
size: 25,
itemStyle: {
borderWidth: 10
}
},
title: {
show: false
},
detail: {
formatter: '{line2|206236}\n{line3|在线用户数(人)}',
rich: {
line2: {
fontSize: '0.5rem',
fontWeight: 800,
color: '#3A92E1'
},
line3: {
fontSize: '0.3rem',
color: '#60D0FD',
borderColor: '#60D0FD', // 边框颜色
borderWidth: 1, // 边框宽度
padding: 8,
borderRadius: 50
}
},
valueAnimation: true,
fontSize: 80,
offsetCenter: [0, '-20%']
},
data: [
{
value: 10
}
]
},
],
graphic: [
{
type: 'rect',
left: '18%',
top: '71%',
z: 10, // 设置层级，确保在仪表盘上方显示
shape: {
width: rtp * 0.5,
height: rtp * 0.2,
r: 20
},
style: {
fill: '#F96402' // 设置正方形的填充颜色，可以根据实际需求调整
}
},
{
type: 'rect',
right: '40%',
top: '71%',
z: 10, // 设置层级，确保在仪表盘上方显示
shape: {
width: rtp * 0.5,
height: rtp * 0.2,
r: 20
},
style: {
fill: '#2578CB' // 设置正方形的填充颜色，可以根据实际需求调整
}
},
{
type: 'text',
left: '25%',
top: '70%',
z: 10, // 设置层级，确保在仪表盘上方显示
style: {
text: '在线人数',
font: '.35rem "Microsoft YaHei", sans-serif',
fill: '#fff'
}
},
{
type: 'text',
right: '20%',
top: '70%',
z: 10, // 设置层级，确保在仪表盘上方显示
style: {
text: '未在线人数',
font: '.35rem "Microsoft YaHei", sans-serif',
fill: '#fff'
}
}
]
});