解决ECharts图表在svg模式下模糊的方法及装置与流程

本发明涉及数据处理，尤其涉及一种解决echarts图表在svg模式下模糊的方法、装置及电子设备。

背景技术：

1、echarts是一款开源可视化图表库，它提供了丰富的图表类型，适用于展示大量的数据，并且支持多种交互功能。echarts可以帮助开发者快速地在web页面中实现数据的可视化，使得数据更加直观易懂。

2、echarts主要基于html5的canvas技术进行绘制，因此它能够提供高性能的图形处理能力。此外，echarts还支持svg，这样在一些不支持canvas的旧浏览器上也能有较好的表现。

3、echarts广泛应用于业务监控、统计分析报告、地理信息系统等多种场合，特别是在需要实时更新数据的情况下，echarts能够很好地适应这种需求。

4、当echarts图表采用svg渲染时，如果图表中的某个部分带有transform="translate(xy)"的path标签时，如果x或者y不是整数，那么就会在对应方向上产生模糊，产生模糊的原因是图形的一部分可能位于一个像素的中间，导致浏览器对这些边界进行反锯齿，从而产生模糊。

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

技术实现思路

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

2、第一方面，本发明实施例提供了一种解决echarts图表在svg模式下模糊的方法，包括：

3、使用reacthooks在组件挂载时初始化图表，并在series数据变化时重新渲染；

4、使用echarts库初始化图表，设置图表的颜色、工具提示、图例、x轴、y轴及网格，根据传入的props动态配置图表，配置完成后使用setoption方法对图表进行渲染；

5、处理传入的series数据，添加额外的样式和配置，自定义工具提示的内容和位置，实现图表的点击事件，支持点击数据点触发回调；

6、动态调整tooltip的位置和样式，使用自定义的formatter函数来格式化轴标签和图例文本，配置完成后使用setoption方法对图表进行渲染；

7、当图表渲染完成之后，使用mychart.on('rendered',()=>{dealpath(chartid);})方法修改图表dom下的所有path标签的transform属性，将transform属性值进行四舍五入，全部变成整数。

8、根据本公开实施例的一种具体实现方式，所述使用reacthooks在组件挂载时初始化图表，并在series数据变化时重新渲染，包括：

9、当useeffect的依赖数组为空时，初始化echarts图表实例；

10、根据传入的seriesdataprop来配置图表的series部分；

11、使用usestate来存储图表的状态以及series数据；

12、当seriesdataprop发生变化时，更新状态，并触发组件的重新渲染；

13、每次状态更新时，使用chartinstance.setoption()来应用新的配置。

14、根据本公开实施例的一种具体实现方式，所述使用echarts库初始化图表，设置图表的颜色、工具提示、图例、x轴、y轴及网格，包括：

15、在dom元素中创建一个新的echarts实例；

16、定义颜色数组，将所述颜色数组赋值给color配置项；

17、基于数据项设置工具提示的触发条件，用自定义的formatter函数来控制工具提示的内容和布局；

18、设置x轴和y轴的类型，定义图表绘制区域的位置和大小；

19、将所有配置项组合成一个配置对象，并通过chartinstance.setoption(config)来应用这些配置。

20、根据本公开实施例的一种具体实现方式，所述根据传入的props动态配置图表，配置完成后使用setoption方法对图表进行渲染，包括：

21、基于接收到的props来构建echarts所需的配置对象，所述配置对象包含图表的必要配置项；

22、使用setoption方法将构建好的配置对象应用到图表实例上；

23、如果props在组件生命周期内发生了改变，则重新构建配置对象并再次调用setoption方法来刷新图表。

24、根据本公开实施例的一种具体实现方式，所述处理传入的series数据，添加额外的样式和配置，包括：

25、分析传入的series数据结构，确定数据类型，为不同类型的数据点添加不同的颜色；

26、配置数据标签来直接在图表上显示数值，并设置标签的位置、字体大小和颜色。

27、根据本公开实施例的一种具体实现方式，所述自定义工具提示的内容和位置，实现图表的点击事件，支持点击数据点触发回调，包括：

28、使用formatter函数来自定义工具提示的内容，通过formatter函数接收鼠标悬停的数据点信息，并返回一个字符串，返回的字符串显示在工具提示中；

29、通过position函数来调整工具提示的位置，position函数接收当前鼠标的位置，并返回工具提示的位置坐标，echarts根据鼠标的位置自动调整工具提示的位置；

30、通过chartinstance.on('click',callback)，在echarts图表上注册一个点击事件监听器，callback为回调函数，callback在用户点击图表时被调用；

31、在回调函数中，访问点击的数据点的名称、值和索引，并基于访问到的点击数据值，执行跳转到详情页操作。

32、根据本公开实施例的一种具体实现方式，所述使用自定义的formatter函数来格式化轴标签和图例文本，配置完成后使用setoption方法对图表进行渲染，包括：

33、在图表的配置选项中，为x轴和y轴设置axislabel属性，并指定自定义的formatter函数；

34、在图例配置中使用自定义的formatter函数，以生成包含额外信息的图例文本；

35、使用chartinstance.setoption()方法将配置应用到图表实例上，完成图表的渲染。

36、根据本公开实施例的一种具体实现方式，所述使用自定义的formatter函数来格式化轴标签和图例文本，配置完成后使用setoption方法对图表进行渲染，还包括：

37、构建图表配置对象option，对象option包括各种图表配置项；

38、构建formatter函数f，用于格式化轴标签和图例文本：

39、f(s)=μ+k1*σ+k2*g

40、其中，μ是对象option中数值的平均值，σ是对象option中数值的标准差，g是对象option中数值的增长率，k1和k2是权重系数

41、使用f函数格式化轴标签和图例文本。

42、第二方面，本发明实施例提供了一种解决echarts图表在svg模式下模糊的装置，包括：

43、初始模块，使用reacthooks在组件挂载时初始化图表，并在series数据变化时重新渲染；

44、配置模块，使用echarts库初始化图表，设置图表的颜色、工具提示、图例、x轴、y轴及网格，根据传入的props动态配置图表，配置完成后使用setoption方法对图表进行渲染；

45、处理模块，处理传入的series数据，添加额外的样式和配置，自定义工具提示的内容和位置，实现图表的点击事件，支持点击数据点触发回调；

46、调整模块，动态调整tooltip的位置和样式，使用自定义的formatter函数来格式化轴标签和图例文本，配置完成后使用setoption方法对图表进行渲染；

47、修改模块，当图表渲染完成之后，使用mychart.on('rendered'，()=>{dealpath(chartid);})方法修改图表dom下的所有path标签的transform属性，将transform属性值进行四舍五入，全部变成整数。

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

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

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

51、该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述任第一方面或第一方面的任一实现方式中的解决echarts图表在svg模式下模糊的方法。

52、第四方面，本发明实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述第一方面或第一方面的任一实现方式中的解决echarts图表在svg模式下模糊的方法。

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

54、本发明实施例中的解决echarts图表在svg模式下模糊的方案，包括：使用reacthooks在组件挂载时初始化图表，并在series数据变化时重新渲染；使用echarts库初始化图表，设置图表的颜色、工具提示、图例、x轴、y轴及网格，根据传入的props动态配置图表，配置完成后使用setoption方法对图表进行渲染；处理传入的series数据，添加额外的样式和配置，自定义工具提示的内容和位置，实现图表的点击事件，支持点击数据点触发回调；动态调整tooltip的位置和样式，使用自定义的formatter函数来格式化轴标签和图例文本，配置完成后使用setoption方法对图表进行渲染；当图表渲染完成之后，使用mychart.on('rendered',()=>{dealpath(chartid);})方法修改图表dom下的所有path标签的transform属性，将transform属性值进行四舍五入，全部变成整数。通过本技术的方案，能够提高echarts图表的清晰度。