echarts自动播放图形

最新推荐文章于 2024-09-12 18:03:09 发布

weixin_30925411

最新推荐文章于 2024-09-12 18:03:09 发布

阅读量596

点赞数 1

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/wyongz/p/11114619.html

版权

echarts中要做到自动播放的功能，首先是要实现能缩放的功能，而缩放的功能是由配置项dataZoom来控制的，而dataZoom中分为inside和slider，分别是内置的控制器和外部的控制器，内置的控制器就是在坐标轴内通过鼠标滑动，滚轮或者手指滑动来控制，而slider这是在坐标轴外加一个滚动条来控制坐标轴的缩放

dataZoom: [
        {
        type: 'inside',
        xAxisIndex: [0, 1],
        start: start,
        end: end
    }, {
        type: 'slider',
        fillerColor: '#4d6b82',
        height: 7,
        bottom: 10,
        xAxisIndex: 0,
        start: 1,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',//进度的两头的圆大小
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 1,//进度的两头的圆的阴影
            shadowOffsetY: 1
        }
    }
    ],

以上是实现内部缩放和外部滚动条的，但是还没有实现自动播放

通过计时器来调整滚动的位置来控制播放

setInterval(() => {
    if (end < 100) {
        myChart.setOption({
            dataZoom: {
                start: start++,
                end: end++
            }
        })
    } else {
        start = 0
        end = 20
    }
}, 300)

没300毫秒向后播放百分之一，当播放到最后的时候重置为零就重新播放了

转载于:https://www.cnblogs.com/wyongz/p/11114619.html