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

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值