[JavaScript知识库]echarts 区域缩放dataZoom自动滚动带提示框(tooltip)

一、技术需求

移动端柱状图展示，数据太大要求显示六条，自动向前移动，带提示框

二、解决办法

监听dataZoom,获取X轴的开始位置和结束位置，每次起始位置和结束位置加1，每隔两秒刷新一次。

var scroll  = setInterval(() => {
    let startValue = myChart.getModel().option.dataZoom[0].startValue;
    let endValue = myChart.getModel().option.dataZoom[0].endValue;
    let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
    let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
    /*bardata.title.length 为x轴数据长度 */
     if (option.dataZoom[0].endValue == bardata.title.length) {
        option.dataZoom[0].endValue = 6
        option.dataZoom[0].startValue = 0
    } else {
        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
    }
    console.log('start',startValue);
    /*提示框跟随*/
        myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: startValue +1,
        });
    myChart.setOption(option) }, 2000)
    /* 用户拖动滚动条或者点击事件，暂停自动滚动不再触发 */
    myChart.on('datazoom', function (params){
         clearInterval(scroll);
    })
    myChart.on('click', function (params) {
        clearInterval(scroll);
        /*提示框获取显示索引*/
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex:0,
            dataIndex: params.dataIndex,
        });
    });