echarts图例分页显示

使用饼图展示数据是一种很常用的数据展示方法，我们可以通过其直观的看出数据的比例，对于一些数据的对比和分析是非常方便的。

最近在使用echarts插件做饼图的时候遇到了一些问题，就是在数据种类很多的时候，图例会撑破画面或是覆盖在饼图上显示，这样就会造成画面布局被打乱，体验是非常差的。

最后结合一系列资料查找总结出了一个简单明了的图例分页方法。如下：

html：（图例分页按钮）

<div id="legend_page" style="width:300px;height:20px;left:223px;top:190px;border:0px solid;position:absolute;display:none;">     <span class="glyphicon glyphicon-step-backward" style="color:#334B5C;" id="preIcon"></span>     <span id="page_text"></span>     <span class="glyphicon glyphicon-step-forward" style="color:#D53A35;" id="nextIcon"></span></div><div id="pie_legend_page" style="width:300px;height:20px;left:522px;top:190px;border:0px solid;position:absolute;display:none;">     <span class="glyphicon glyphicon-step-backward" style="color:#334B5C;" id="preBtn"></span>     <span id="pie_page_text"></span>     <span class="glyphicon glyphicon-step-forward" style="color:#D53A35;" id="nextBtn"></span></div>

js：（分页方法）

//图例分页显示函数function setLegendPagination(totalLegendData,pageNumber,chart,pieNum) {    var total = totalLegendData.length;    if(total>7){    $("#legend_page").show();    $("#pie_legend_page").show();    }else{//图例小于7个时不显示    $("#legend_page").hide();    $("#pie_legend_page").hide();    }    var totalPage = Math.ceil(total / 7); //总页数    if (pageNumber <= totalPage && pageNumber > 0) {//保证页数在有效值范围内        var legendData = [];        var skip = parseInt((pageNumber - 1)) * 7;        for (var i = skip; i < skip + 7; ++i) {            legendData[i - skip] = totalLegendData[i];        }        if(pieNum==1){//判断是哪个图形        $("#page_text").html(pageNumber + '/' + totalPage);//分页图标中间的显示内容，如1/7,代表当前页和总的页数        }else{        $("#pie_page_text").html(pageNumber + '/' + totalPage);        }        chart.setOption({            legend: {                data: legendData            }        })    }}

上面的函数有4个传参，分别是：存储图例数据的数组，当前页数，要设置图例的图形对象，图形区分（用于有多个图形时进行图形区分，可传1、2、3....）。

//图例初始化函数（可选择时间饼图）function setPage(arr,chart){var pageNumber=1;$("#preIcon").click(function(){pageNumber--;setLegendPagination(arr,pageNumber,chart,1);});$("#nextIcon").click(function(){pageNumber++;setLegendPagination(arr,pageNumber,chart,1);});  setLegendPagination(arr,pageNumber,chart,1);}//图例初始化函数（不可选择时间饼图）function setPiePage(arr,chart){var pageNumber=1;$("#preBtn").click(function(){pageNumber--;setLegendPagination(arr,pageNumber,chart,2);});$("#nextBtn").click(function(){pageNumber++;setLegendPagination(arr,pageNumber,chart,2);});setLegendPagination(arr,pageNumber,chart,2);}

上面的函数用于初始化图形并在点击按钮时进行图例分页显示。

                 var arr = [];                     var value = [];                     for(var i=0;i<result.length;i++){                     arr.push(result[i]["parent_a_name"]);                     }                                       for(var i=0;i<result.length;i++){                     value.push({value:result[i]["h_total_energy"],name:result[i]["parent_a_name"]});                                         }                                        pieChart.setOption({        //加载数据图表                         series: [{                                                          data: value                         }]                     });                  setPiePage(arr,pieChart);

上面的代码是在ajax成功返回结果的区域直接调用方法，这样就可以在用ajax请求数据后进行图形传参初始化，并对图例进行分页显示了。

效果如下：