实现效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201026161112380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZvY3VzbWlja2V5,size_16,color_FFFFFF,t_70#pic_center)
option配置:
option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
axisLine:{
show: true,
lineStyle: {
color: [
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "#4ed6b3"
},
{
offset: 0.5,
color: "#b2df6b"
}
])
]
],
width: 23
}
},
name: '温度',
type: 'gauge',
radius: '40%',
max: 50,
startAngle: 180, //开始角度 左侧角度
endAngle: 0, //结束角度 右侧
splitNumber: 6,
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
length: '45%',
width: 3
},
itemStyle: {
color: '#2adff1'
},
detail:
{
formatter: '{value}°C',
offsetCenter: [0, '-120px'],
fontSize: 30,
lineHeight: 24,
color: 'auto'
},
data: [
{
value: 26.3,
}]
}
]
};
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);
如果大家想一起交流学习,共同进步,欢迎搜索公众号“是日前端”,输入关键词如:前端基础,获取资料,资料刚开始整理,目前还在完善中,点击交流群按钮进交流群,群里仅限技术交流、面试交流等,需要其它相关资料可以群里说,后续交流群人数增多会考虑特色内容,再次感谢大家的支持~