ECharts图表自定义图例功能的方法及装置与流程

本发明涉及数据处理，尤其涉及一种echarts图表自定义图例功能的方法、装置及电子设备。

背景技术：

1、echarts是一个基于javascript的开源可视化库。它提供了丰富的图表类型和配置选项，能够帮助开发者快速创建出高质量、交互性强的数据可视化图表。echarts支持多种图表类型，包括但不限于折线图、柱状图、散点图、饼图、k线图、地图等，并且具有良好的跨平台兼容性，可以在pc和移动设备上流畅运行。

2、echarts可以被集成到任何网页中，并且很容易与现代前端框架如vue,react,angular等结合使用。由于其出色的性能表现和易用性，echarts成为了许多企业和个人开发者在构建数据可视化解决方案时的选择之一。

3、现有技术在使用echarts图表的过程中，存在如下问题：

4、1.灵活性不足：echarts默认的图例布局和样式选项有限，难以实现一些复杂的自定义需求，无法精确控制图例项的位置、间距等。

5、2.交互性受限：默认图例的点击交互较为简单，只能切换系列的显示/隐藏，难以实现更复杂的交互效果,如拖拽排序、多选等。

6、3.样式定制的局限性：虽然提供了一些样式配置，但对于一些特殊的设计需求可能还不够。

7、上述问题成为需要解决的技术问题。

技术实现思路

1、有鉴于此，本发明实施例提供了一种echarts图表自定义图例功能的方法、装置及电子设备，至少部分解决现有技术中存在的问题。

2、第一方面，本发明实施例提供了一种echarts图表自定义图例功能的方法，包括：

3、通过props接收自定义图例的配置参数p，通过初始化函数init()对所述自定义图例进行初始操作，得到图例初始配置参数c0和图例初始状态参数s0，(s0,c0)=init(p)；

4、使用react的usestate钩子创建状态变量snt，状态变量snt通过s0完成初始化状态snt=usestate(s0)，状态变量snt在组件生命周期中实时更新，使用useref钩子创建一个引用对象ref=useref()，引用对象ref保存对dom节点和非渲染依赖项的引用，用以保持跨渲染的状态一致性；

5、通过sort函数对echarts图表对应的原始数据d进行排序，生成新的排序数据d'=sort(d)，通过configurechart函数利用基本配置c0和排序数据d'来设置echarts图表的详细属性chart0=configurechart(c0,d')；

6、通过generatelegend函数遍历echarts图表的图例数据l，并为每个图例项创建对应的<li>html标签，利用handlehover函数处理鼠标悬停事件e，当用户将鼠标悬停在图例数据l的图例项上时，改变图例项及其关联数据的表现形式，编写handlelegendclick函数处理图例项点击事件e，更新当前状态snt为s1并相应地改变图表chart0为chart1；

7、通过handleclick函数定义回调事件，在用户点击图表上的特定区域执行额外操作，定义applyemphasis函数在鼠标悬停时应用高亮效果到图表chart1，并生成chart2，设置conditionalrender函数根据数据量d和响应式设计规则r决定是否显示分页器元素，优化小规模数据集的显示效果，基于updateondatachange函数监控数据d的变化，更新状态s1为s2并重新渲染图表chart2为chart3。

8、根据本公开实施例的一种具体实现方式，所述通过props接收自定义图例的配置参数p，通过初始化函数init()对所述自定义图例进行初始操作，得到图例初始配置参数c0和图例初始状态参数s0，包括：

9、通过props接收各种配置参数p，所述配置参数p包括：chartid、颜色方案和数据类型。

10、根据本公开实施例的一种具体实现方式，所述通过props接收自定义图例的配置参数p，通过初始化函数init()对所述自定义图例进行初始操作，得到图例初始配置参数c0和图例初始状态参数s0，还包括：

11、通过init()函数对通过props接收到的所有配置参数p进行解析，识别出指定的颜色、字体大小以及图例项布局信息；

12、对于没有被明确指定但在实际使用中必需的参数，通过init()函数自动为其设置默认值；

13、确定图例初始配置参数c0，包括：确定图例项的位置与排列方式，设置每个图例项的颜色、形状及文字标签，指定是否支持点击选中/取消选中图例项以控制相应数据系列的显示与否，配置图例项之间的间距；

14、确定图例初始状态参数s0：包括：确定默认激活的图例项，当前是否存在筛选条件，多页展示时的当前页码，以及搜索过滤器的状态。

15、根据本公开实施例的一种具体实现方式，所述通过sort函数对echarts图表对应的原始数据d进行排序，生成新的排序数据d'=sort(d)，通过configurechart函数利用基本配置c0和排序数据d'来设置echarts图表的详细属性chart0=configurechart(c0,d')，包括：

16、使用sort函数遍历原始数据d，并根据预设的排序标准，将原始数据d中的数据项逐一比较并调整其位置，生成一个新的排序后的数据集d′。

17、根据本公开实施例的一种具体实现方式，所述通过sort函数对echarts图表对应的原始数据d进行排序，生成新的排序数据d'=sort(d)，通过configurechart函数利用基本配置c0和排序数据d'来设置echarts图表的详细属性chart0=configurechart(c0,d')，还包括：

18、根据c0中的配置，设置图表的标题文本和样式，定义图表中各个图形元素的类型，并设置各个图形元素的样式属性，配置图例的位置、显示方式以及每个图例项的标签和颜色；

19、定义当鼠标悬停在图表上的特定位置时，tooltip显示的具体内容，并设置tooltip的外观；

20、将排序后的数据d′映射到相应的图表系列中，将所有配置项整合在一起，形成一个完整的图表配置对象chart0，chart0对象包含了图表的所有视觉和行为属性。

21、根据本公开实施例的一种具体实现方式，所述通过generatelegend函数遍历echarts图表的图例数据l，并为每个图例项创建对应的<li>html标签，包括：

22、从echarts实例中提取出图例数据l，图例数据l包含了图表中所有系列的名字以及相关信息；

23、创建一个空的dom片段，用来存放即将生成的所有<li>标签，所述空的dom片段作为图例外部的包裹元素；

24、对图例数据l进行循环遍历，对于遍历到的图例项，基于图例项的信息来构建一个新的<li>标签，在<li>标签内部添加代表该图例的颜色块或图标，在颜色块旁边添加文本标签，显示该图例项的具体名称；

25、为每个<li>标签增加点击事件监听器，当用户点击图例项时，通过javascript控制echarts图表，来隐藏或显示相应的数据系列；

26、把包含所有<li>标签的完整html结构插入到图表下方或者侧边的列表区域。

27、根据本公开实施例的一种具体实现方式，所述利用handlehover函数处理鼠标悬停事件e，当用户将鼠标悬停在图例数据l的图例项上时，改变图例项及其关联数据的表现形式，包括：

28、定义handlehover函数，handlehover函数接收两个参数：事件类型以及当前被悬停的图例项的信息；

29、对于生成的每个<li>图例项，为其添加鼠标悬停和鼠标离开(mouseout)事件的监听器；

30、在handlehover函数内部，根据接收到的事件类型来决定如何响应：如果是mouseover事件，则更新该图例项的样式以突出显示，如果是mouseout事件，则恢复图例项及关联数据系列到默认样式；

31、使用echarts提供的setoption方法来调整图表中相应数据系列的表现形式，使用dispatchaction方法发送动作到图表，用来高亮预设系列或设置提示框的内容；

32、在mouseout事件处理中取消之前的高亮效果，并且恢复到初始状态。

33、根据本公开实施例的一种具体实现方式，所述基于updateondatachange函数监控数据d的变化，更新状态s1为s2并重新渲染图表chart2为chart3，包括：

34、使用updateondatachange函数来监听数据d中的新增、删除或修改条目操作；

35、在updateondatachange函数内部，当检测到数据d发生了变化，根据新的状态s2和更新后的数据来重新绘制图表，将chart2的图表更新成为chart3。

36、第二方面，本发明实施例提供了一种echarts图表自定义图例功能的装置，包括：

37、初始模块，通过props接收自定义图例的配置参数p，通过初始化函数init()对所述自定义图例进行初始操作，得到图例初始配置参数c0和图例初始状态参数s0，(s0,c0)=init(p)；

38、创建模块，使用react的usestate钩子创建状态变量snt，状态变量snt通过s0完成初始化状态snt=usestate(s0)，状态变量snt在组件生命周期中实时更新，使用useref钩子创建一个引用对象ref=useref()，引用对象ref保存对dom节点和非渲染依赖项的引用，用以保持跨渲染的状态一致性；

39、排序模块，通过sort函数对echarts图表对应的原始数据d进行排序，生成新的排序数据d'=sort(d)，通过configurechart函数利用基本配置c0和排序数据d'来设置echarts图表的详细属性chart0=configurechart(c0,d')；

40、遍历模块，通过generatelegend函数遍历echarts图表的图例数据l，并为每个图例项创建对应的<li>html标签，利用handlehover函数处理鼠标悬停事件e，当用户将鼠标悬停在图例数据l的图例项上时，改变图例项及其关联数据的表现形式，编写handlelegendclick函数处理图例项点击事件e，更新当前状态snt为s1并相应地改变图表chart0为chart1；

41、更新模块，通过handleclick函数定义回调事件，在用户点击图表上的特定区域执行额外操作，定义applyemphasis函数在鼠标悬停时应用高亮效果到图表chart1，并生成chart2，设置conditionalrender函数根据数据量d和响应式设计规则r决定是否显示分页器元素，优化小规模数据集的显示效果，基于updateondatachange函数监控数据d的变化，更新状态s1为s2并重新渲染图表chart2为chart3。

42、第三方面，本发明实施例还提供了一种电子设备，该电子设备包括：

43、至少一个处理器；以及，

44、与该至少一个处理器通信连接的存储器；其中，

45、该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述任第一方面或第一方面的任一实现方式中的echarts图表自定义图例功能的方法。

46、第四方面，本发明实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述第一方面或第一方面的任一实现方式中的echarts图表自定义图例功能的方法。

47、第五方面，本发明实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述第一方面或第一方面的任一实现方式中的echarts图表自定义图例功能的方法。

48、本发明实施例中的echarts图表自定义图例功能的方案，包括：通过props接收自定义图例的配置参数p，通过初始化函数init()对所述自定义图例进行初始操作，得到图例初始配置参数c0和图例初始状态参数s0，(s0,c0)=init(p)；

49、使用react的usestate钩子创建状态变量snt，状态变量snt通过s0完成初始化状态snt=usestate(s0)，状态变量snt在组件生命周期中实时更新，使用useref钩子创建一个引用对象ref=useref()，引用对象ref保存对dom节点和非渲染依赖项的引用，用以保持跨渲染的状态一致性；通过sort函数对echarts图表对应的原始数据d进行排序，生成新的排序数据d'=sort(d)，通过configurechart函数利用基本配置c0和排序数据d'来设置echarts图表的详细属性chart0=configurechart(c0,d')；通过generatelegend函数遍历echarts图表的图例数据l，并为每个图例项创建对应的<li>html标签，利用handlehover函数处理鼠标悬停事件e，当用户将鼠标悬停在图例数据l的图例项上时，改变图例项及其关联数据的表现形式，编写handlelegendclick函数处理图例项点击事件e，更新当前状态snt为s1并相应地改变图表chart0为chart1；通过handleclick函数定义回调事件，在用户点击图表上的特定区域执行额外操作，定义applyemphasis函数在鼠标悬停时应用高亮效果到图表chart1，并生成chart2，设置conditionalrender函数根据数据量d和响应式设计规则r决定是否显示分页器元素，优化小规模数据集的显示效果，基于updateondatachange函数监控数据d的变化，更新状态s1为s2并重新渲染图表chart2为chart3。通过本技术的方案，不显示echarts图表自带的图例，使用dom结构模拟echarts图例写出自定义图例，进而提高了echarts图表交互的灵活性。