最近有读者问,如何做一个仪表盘,读数从 30-70,每秒跳动一格。
于是做了个例子,思路是 setInterval setOption。
配置项及定时代码如下:
代码语言:javascript复制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
用于仪表盘轴线的配色,轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。
默认值:
代码语言:javascript复制[[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(不合并可以用于替换图表,比如点击某处将仪表盘换成饼图时)。