急！！！echarts如何显示不同数据？

Question

如何设置类似轮播的效果 一开始选中一个色块 并且右边的折线图展示色块对应的数据
每隔5秒自动跳转到下一个色块 右边同时也改变
鼠标hover到其中一个色块即选中当前色块 计时跳转色块相应停止
求相关配置或api地址或demo 在线等 谢谢

Answer 1

之前写过 直接粘过来了

var chartsInterval = function(myChart, option) {
        var app = {
            currentIndex: -1
        };
        var timer = null;
        var timerTime = null;

        function go() {
            clearInterval(timer);
            timer = setInterval(function() {
                var dataLen = option.series[0].data.length;
                // 取消之前高亮的图形
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: app.currentIndex
                });
                app.currentIndex = (app.currentIndex + 1) % dataLen;
                // 高亮当前图形
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: app.currentIndex
                });
                // 显示 tooltip
                myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: app.currentIndex
                });
            }, 1500);
        }
        function stop(){
            clearTimeout(timerTime);
            clearInterval(timer);
        }
        //鼠标移上停止
        myChart.on("mouseover", function() {
            stop();
        })
        //鼠标移开启动
        myChart.on("mouseout", function() {
            //防止多次移入移出调用多次
            clearTimeout(timerTime);
            timerTime = setTimeout(function() {
                go()
            }, 5000)
        })
        return {
            currentIndex: app.currentIndex,
            go: go,
            stop:stop
        }
    }
//调用
var chartItv = chartsInterval(myChart, option);
chartItv.go();//启动
//chartItv.stop();//停止