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);
        }
    }
}

 

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