echarts中lenght数据太多分页处理

原创 六月初 随笔 echarts的使用 176阅读 2018-01-26 13:13:53 举报

直接代码:
div部分:
<style>
.pagePie{position: absolute;right:20px;bottom: 10px; z-index: 999;}
</style>
<div class="pagePie" id="legend_page">
<a href="javascript:void(0)" id="preIcon" style="color: #fff;background: green;padding: 2px 5px;border-radius: 3px;">prv</a>
<span id="now_text" style="color: #fff;">1</span>/
<span id="page_text" style="color: #fff;">1</span>
<a href="javascript:void(0)" id="nextIcon" style="color: #fff;background: blue;padding: 2px 5px;border-radius: 3px;">next</a>
</div>
注:此部分代码时分页上下按钮部分,需要定位到插件调用对应的div的位置中。
js部分代码:
var BarBOX = echarts.init(document.getElementById("pieZone"));
$("#page_text").html(Math.ceil(data1.length/6));
$("#preIcon").click(function(){
var datasNew = [];
var num =parseInt($("#now_text").html()) ;
var skip = num * 6;
if(num <1){
return false;
}else{
$("#now_text").html(num-1);
for (var i = skip-6; i < skip;i++) {
datasNew.push(data1[i])
}
BarBOX.setOption({
legend: {
data: datasNew
}
})
}
});

            $("#nextIcon").click(function(){
                var datasNew = [];
                var num =parseInt($("#now_text").html()) ;
                var nums =parseInt($("#page_text").html()) ;
                var skip = num * 6;
                if(num >= nums){
                    return false;
                }else{
                    $("#now_text").html(num+1)
                    for (var i = skip; i < skip + 6; ++i) {
                        datasNew.push(data1[i])
                    }
                    BarBOX.setOption({
                        legend: {
                            data: datasNew
                        }
                    })
                }
            });

效果图:

echarts中lenght数据太多分页处理

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复