读者提问:如何实现仪表盘每秒跳动一格

2022-04-10 10:08:48 浏览数 (2)

最近有读者问,如何做一个仪表盘,读数从 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(不合并可以用于替换图表,比如点击某处将仪表盘换成饼图时)。

0 人点赞