读者提问：如何实现仪表盘每秒跳动一格
读者提问：如何实现仪表盘每秒跳动一格
ZXand618
发布于 2022-04-10 10:08:48
发布于 2022-04-10 10:08:48
最近有读者问，如何做一个仪表盘，读数从 30-70，每秒跳动一格。
于是做了个例子，思路是 setInterval + setOption。
配置项及定时代码如下：
var val = 30;
option = {
title: {
text: '仪表盘每秒跳动一格'
},
series: [{
name: '仪表盘每秒跳动一格v1',
type: 'gauge',
center: ['25%', '50%'],
radius: '50%',
axisLine: {
lineStyle: {
color: [
[0.299, '#888'],
[0.7, '#91c7ae'],
[1, '#888']
]
}
},
data: [{
value: val,
name: '读数'
}]
}, {
name: '仪表盘每秒跳动一格v2',
type: 'gauge',
center: ['75%', '50%'],
radius: '50%',
min: 30,
max: 70,
axisLine: {
lineStyle: {
color: [
[1, '#91c7ae']
]
}
},
data: [{
value: val,
name: '读数'
}]
}]
};
app.timeTicket = setInterval(function() {
val === 70 ? val = 30 : val++;
option.series[0].data[0].value = val;
option.series[1].data[0].value = val;
myChart.setOption(option, true);
}, 1000);做了两个仪表盘，一个把不需要的刻度设置成了灰色，另一个直接把不需要的刻度去掉了。
一些说明
- series-gauge.axisLine.lineStyle.color
用于仪表盘轴线的配色，轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。
默认值：
[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]也就是 0% ~ 20%（包括 20%） 是第一种颜色 '#91c7ae'；
20% ~ 80%（不包括 20%，但包括 80%）是第二种颜色 '#63869e'；
80% ~ 100%（不包括 80%）是第三种颜色 '#c23531'。
- series-gauge.min 和 series-gauge.min
用于设置仪表盘刻度的最小、最大值。
- myChart.setOption(option, true);
setOption 第二个参数是 notMerge，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
选择合并时，setOption 的第一个参数可以只传入需要修改的部分 option，选择不合并时，则必须传入完整的 option（不合并可以用于替换图表，比如点击某处将仪表盘换成饼图时）。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-04-05，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 ZXand618的ECharts之旅 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读