echarts自動播放圖形

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毫秒向后播放百分之一，當播放到最后的時候重置為零就重新播放了