echarts图例分页显示

最新推荐文章于 2024-07-18 17:15:09 发布

静雄桑

最新推荐文章于 2024-07-18 17:15:09 发布

阅读量9.2k

点赞数 1

分类专栏： JavaScript 文章标签：插件 javascript

本文链接：https://blog.csdn.net/qq_36173194/article/details/78135906

版权

本文介绍了在使用Echarts插件绘制饼图时，如何处理因数据过多导致图例撑破画面的问题。通过图例分页的方法，解决了图例覆盖饼图和破坏布局的体验问题。提供了一段HTML代码示例，展示了图例分页按钮的实现，并给出了在AJAX成功后调用初始化图形和图例分页显示的方法。

摘要由CSDN通过智能技术生成

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

最近在使用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>
<