实现效果:
echarts使用说明请查看:Vue中使用echarts实现常用图表总结
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);