一种基于iQuery的ECharts插件并实现legend分页方案制造技术

本发明专利技术提供一种基于iQuery的ECharts插件并实现legend分页方案，涉及系统开发技术领域。该基于iQuery的ECharts插件并实现legend分页方案，包括以下步骤：S1.在jQuery代码上引入ECharts插件，引入方法包括：方法一：直接去官网下载相关包，然后通过<script>标签方式引入；方法二：使用npm安装引入，具体为npm install echarts

【技术实现步骤摘要】
一种基于iQuery的ECharts插件并实现legend分页方案


[0001]本专利技术涉及系统开发
，具体为一种基于iQuery的ECharts插件并实现legend分页方案。

技术介绍

[0002]目前对于系统开发的功能，在使用jQuery前端开发工具的前提下，再引入ECharts插件来渲染各种图形展示，部分图形需要展示的数据在一般情况下都是可以正常显示的，但是有可能会出现需要在一个图表上展示大量不同类型的数据的情况，这时候ECharts图的legend部分就会全部展示出来，页面很乱且不美观，用户体验差。

技术实现思路

[0003](一)解决的技术问题
[0004]针对现有技术的不足，本专利技术提供了一种基于iQuery的ECharts插件并实现legend分页方案，解决了在使用ECharts渲染图表展示大量不同类型的数据时，ECharts图的legend部分会全部展示出来，导致页面很乱且不美观，用户体验差的问题。
[0005](二)技术方案
[0006]为实现以上目的，本专利技术通过以下技术方案予以实现：一种基于iQuery的ECharts插件并实现legend分页方案，该方案至少包括jQuery前端工具和ECharts插件，包括以下步骤：
[0007]S1.在jQuery代码上引入ECharts插件，引入方法包括：
[0008]方法一：直接去官网下载相关包，然后通过<script>标签方式引入；
[0009]方法二：使用npm安装引入，具体为npm install echarts
‑‑
save；
[0010]方法三：cdn方式引入；
[0011]S2.将渲染出的ECharts插件的legend部分用代码实现分页，具体包括：首先，ECharts最常见的有三种类型的图，如饼图、柱状图和折线图，能更清晰和美观的统计并展示出大量数据，让人一目了然，当数据种类过多时，ECharts渲染图的legend部分会占据很大部分空间，给用户感觉页面很杂乱，不美观，这时候就需要用到我们提供的方法来实现legend部分翻页。
[0012]优选的，所述方案在使用jQuery前端开发工具的前提下，再引入ECharts插件来渲染各种图形展示，部分图形需要展示的数据在一般情况下都是可以正常显示的。
[0013]优选的，所述方案基于jQuery前端工具基础上使用ECharts插件并实现legend分页，通过使用legend分页方式方便显示多类数据，页面显得不那么拥挤和杂乱，更加美观，用户体验也会更好。
[0014]优选的，所述方案能够使用代码逻辑，实现当ECharts图表需要展示大量不同类型的数据时，legend部分可以分页显示，而不仅仅只是legend排列顺序横向或纵向的改变。
[0015]优选的，所述步骤S2中实现分页功能的方式有两种：第一种是使用ECharts插件饼
图中legend的属性type:'scroll'；第二种方式就是修改ECharts源代码。
[0016]优选的，所述修改ECharts源代码的方式需要修改两处源代码。
[0017]优选的，所述第一处修改能够将步骤2的自定义参数pagemode:true传进echarts,为了避免有其他方法调用layout方法导致其他图表错误，所以用了判断if(componentModel.get(
‘
pagemode
’
)){
…
}，有参数pagemode:true时，才会进入改动的代码。
[0018]优选的，所述第二处修改能够在图例总高度大于legend容器高度，需要换行时,不让其换行，而是一直向下画图例，同时向步骤1建的容器$(
’
.js
‑
eclegend
‑
tool
’
)里面添加
‘
上一页
’
、
‘
下一页
’
按钮。
[0019](三)有益效果
[0020]本专利技术提供了一种基于iQuery的ECharts插件并实现legend分页方案。
[0021]具备以下有益效果：
[0022]1、本专利技术提供了一种基于iQuery的ECharts插件并实现legend分页方案，通过在jQuery代码上引入ECharts插件，并且将渲染出的ECharts插件的legend部分用代码实现分页，这种方式方便显示多类数据，使页面显得不那么拥挤和杂乱，更加美观，用户体验也会更好。
[0023]2、本专利技术提供了一种基于iQuery的ECharts插件并实现legend分页方案，通过使用代码逻辑，实现了当ECharts图表需要展示大量不同类型的数据时，legend部分可以分页显示，而不仅仅只是legend排列顺序横向或纵向的改变，使用legend分页方式方便显示多类数据，页面显得不那么拥挤和杂乱，更加美观，用户体验也会更好。
附图说明
[0024]图1为本专利技术的饼状示意图；
[0025]图2为本专利技术的折线示意图；
[0026]图3为本专利技术的柱状示意图；
[0027]图4为本专利技术的模块示意图；
[0028]图5为本专利技术的第一处修改代码示意图；
[0029]图6为本专利技术的第二处修改代码示意图。
具体实施方式
[0030]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0031]实施例：
[0032]如图1
‑
6所示，本专利技术实施例提供一种基于iQuery的ECharts插件并实现legend分页方案，该方案至少包括jQuery前端工具和ECharts插件，包括以下步骤：
[0033]S1.在jQuery代码上引入ECharts插件，引入方法包括：
[0034]方法一：直接去官网下载相关包，然后通过<script>标签方式引入；
[0035]方法二：使用npm安装引入，具体为npm install echarts
‑‑
save；
[0036]方法三：cdn方式引入；
[0037]S2.将渲染出的ECharts插件的legend部分用代码实现分页，具体包括：首先，ECharts最常见的有三种类型的图，如饼图、柱状图和折线图，能更清晰和美观的统计并展示出大量数据，让人一目了然，当数据种类过多时，ECharts渲染图的legend部分会占据很大部分空间，给用户感觉页面很杂乱，不美观，这时候就需要用到我们提供的方法来实现legend部分翻页。本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于iQuery的ECharts插件并实现legend分页方案，该方案至少包括jQuery前端工具和ECharts插件，其特征在于，包括以下步骤：S1.在jQuery代码上引入ECharts插件，引入方法包括：方法一：直接去官网下载相关包，然后通过<script>标签方式引入；方法二：使用npm安装引入，具体为npminstall echarts
‑‑
save；方法三：cdn方式引入；S2.将渲染出的ECharts插件的legend部分用代码实现分页，具体包括：首先，ECharts最常见的有三种类型的图，如饼图、柱状图和折线图，能更清晰和美观的统计并展示出大量数据，让人一目了然，当数据种类过多时，ECharts渲染图的legend部分会占据很大部分空间，给用户感觉页面很杂乱，不美观，这时候就需要用到我们提供的方法来实现legend部分翻页。2.根据权利要求1所述的一种基于iQuery的ECharts插件并实现legend分页方案，其特征在于：所述方案在使用jQuery前端开发工具的前提下，再引入ECharts插件来渲染各种图形展示，部分图形需要展示的数据在一般情况下都是可以正常显示的。3.根据权利要求1所述的一种基于iQuery的ECharts插件并实现legend分页方案，其特征在于：所述方案基于jQuery前端工具基础上使用ECharts插件并实现legend分页，通过使用legend分页方式方便显示多类数据，页面显得不那么拥挤和杂乱，更加美观，用户体验也会更好。4.根据权利要求1所述的一种基于iQuery的ECharts插件并实现legend分页方案，其特征在于：所述方案能够使用代码逻辑，实现当ECharts图表需要展示大量不同类型的...

【专利技术属性】
技术研发人员：王小东，杨小帅，郑光存，
申请(专利权)人：北京天地和兴科技有限公司，
类型：发明
国别省市：