js鼠標提示框/定時器實現輪播

//鼠標提示方法

function main(spreadsheetReport, isAjaxRefreshCallback) {
    //判斷jquery
    if (!$) {
        jsloader.resolve("thirdparty.jquery.jquery", true);
    }
    //這裏是獲取當前要添加提示的單元格(即元素)
    var supportorEmail = spreadsheetReport.getCell(3, 3);
    var tip = "這是郵箱編碼";
    var tipDiv = createDiv(supportorEmail, tip);

}
//下面兩個方法是設置div的。
function createDiv(cell, tip) {
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.border = "1px solid #C4E1FF";
    div.style.padding = "10px";
    div.style.backgroundColor = "#fff"; //設置提示框背景顏色
    div.style.textAlign = 'left';
    div.innerHTML = "<font color = black>" + tip + "</font>"; //設置提示內容字體顏色

    //增加鼠標移動事件
    $(cell).mousemove(function(event) {
        setDIV(event, true, cell, div);
    });
    //增加鼠標移走事件
    $(cell).mouseleave(function(event) {
        setDIV(event, false, cell, div);
    });
}

function setDIV(e, show, cell, div) {
    if (show) {
        //根據鼠標位置設置提示的位置
        cell.appendChild(div);
        var x = e.clientX || e.layerX;
        var y = e.clientY || e.layerY;
        div.style.top = y + "px";
        div.style.left = x + 10 + "px";
    } else {
        cell.removeChild(div);
    }
}

2.定時器實現輪播,並將上一條數據還原

////使用定時器設置輪播的時候,記得在可以在定時器中加入一個判斷當前的一些局部變量,如果沒有了,說明當前頁面關閉了,當前資源釋放了。這樣就可以調用clearInterval(“定時器名稱”);來結束定時器釋放資源!或者使用try{}catch€{}捕獲到異常就停止定時器
function main(chartView) {
    //獲取全局echarts
    var echarts = chartView.getChartObject();
    // 獲取smartbi中原始圖形的options信息,是個json對象
    var options = echarts.getOptions();
    //獲取示例對象
    var echartsInstance = echarts.getChart();
    //獲取第一個系列displayValue
    var serie = options.series[0];
    //獲取datas
    var datas = serie.data;

    //實現輪播————————————————
    //定義參數,當前需要改爲紅色的數據的下標
    chartView.showRedNum = 0;
    //總數據量
    var dataLength = datas.length;
    //用於記錄上一條顏色
    var beforeColor = "";
    //定義參數first用於:判斷第一次進定時器的時候不需要給最後一個柱子修改顏色
    var first = true;
    //將定時器的值存入局部變量
    if (typeof(interval) === 'undefined') {
        //第一次進來執行輪播,並賦值
        interval = setInterval(autoRed, 1000);
    } else {
        //執行刷新之後,先清停掉之前的interval
        clearInterval(interval);
        interval = setInterval(autoRed, 1000);
    }

    function autoRed() {
        try {
            //給上一條數據賦值,要兼容爲0的情況
            if (chartView.showRedNum === 0) {
                if (!first) {
                    //不是第一次進入方法且num爲0的時候,說明此時爲第一條柱子。
                    //上一次執行了最後一條柱子,給最後一條柱子修改爲它原來的顏色
                    datas[dataLength - 1].itemStyle.normal.color = beforeColor;
                }
            } else {
                //不爲0的時候:直接將上一條的顏色還原
                datas[chartView.showRedNum - 1].itemStyle.normal.color = beforeColor;
            }
            //以後不再修改first
            first = false;

            //記錄這一次變化之前的顏色
            beforeColor = datas[chartView.showRedNum].itemStyle.normal.color;

            //設置當前數據爲紅色
            datas[chartView.showRedNum].itemStyle.normal.color = "red";

            //下一條數據的下標
            chartView.showRedNum++;

            //下標超出數組了,置爲0
            if (chartView.showRedNum == dataLength) {
                chartView.showRedNum = 0;
            }

            echartsInstance.setOption(options);
        } catch (err) {
            //當關閉報表的時候,執行定時器會報錯。這時候就停掉定時器
            clearInterval(interval);
        }
    }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章