[发明专利]Echarts图表的数据显示方法及装置

说明书

技术领域

本申请涉及图表领域，具体而言，涉及一种Echarts图表的数据显示方法及装置。

背景技术

商业级数据图表(Enterprise Charts，简称ECharts)，是一款基于HTML5 Canvas的企业级图表库，在使用Echarts图表的过程中，经常会使用包含坐标轴的图表来展示二维数据，如折线图、柱状图等。在展示过程中坐标轴纵(横)轴左(下)侧会显示每个刻度所标示的数据度(即，label)，为了能够正确显示label，在初始化图表时通常会给坐标轴设定一定的宽度来实现。然而，在相关技术中，初始化Echarts图表时，通常设定坐标轴纵轴的边距为一个具体的数字，例如20像素，由于字符实际在canvas画布中占据的宽度无法得知，所以预先设定的固定宽度并不准确。因此，在数据长度过长时容易超出坐标轴的显示范围，导致部分数据被截断显示不完整。

针对相关技术中当Echarts图表中数据长度过长时，容易导致数据显示不完整的问题，目前尚未提出有效的解决方案。

发明内容

本申请的主要目的在于提供一种Echarts图表的数据显示方法及装置，以解决相关技术中当Echarts图表中数据长度过长时，容易导致数据显示不完整的问题。

为了实现上述目的，根据本申请的一个方面，提供了一种Echarts图表的数据显示方法。该方法包括：获取待显示数据，其中，待显示数据为需要在Echarts图表上进行显示的数据；在待显示数据中获取字符长度最长的数据，得到目标数据；创建canvas画布并在canvas画布上绘制目标数据；计算目标宽度，其中，目标宽度为目标数据在canvas画布上所占据的宽度；以及根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据。

进一步地，计算目标宽度包括：确定绘制目标数据的像素点在canvas画布上的起始位置；确定绘制目标数据的像素点在canvas画布上的终止位置；以及根据起始位置和终止位置计算目标宽度。

进一步地，获取待显示数据包括：获取在Echarts图表的纵轴上需要进行显示的数据，得到待显示的纵轴数据，在待显示数据中获取字符长度最长的数据，得到目标数 据包括：在待显示的纵轴数据中获取字符长度最长的数据，得到纵轴目标数据，创建canvas画布并在canvas画布上绘制目标数据包括：创建canvas画布并在canvas画布绘制纵轴目标数据，计算目标宽度包括：计算纵轴目标数据在canvas画布上所占据的宽度，得到纵轴目标宽度，根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据包括：根据纵轴目标宽度调整Echarts图表的纵轴边距并在调整纵轴边距后的Echarts图表的纵轴上显示待显示的纵轴数据。

进一步地，获取待显示数据包括：获取在Echarts图表的横轴上需要进行显示的数据，得到待显示的横轴数据，在待显示数据中获取字符长度最长的数据，得到目标数据包括：在待显示的横轴数据中获取字符长度最长的数据，得到横轴目标数据，创建canvas画布并在canvas画布上绘制目标数据包括：创建canvas画布并在canvas画布绘制横轴目标数据，计算目标宽度包括：计算横轴目标数据在canvas画布上所占据的宽度，得到横轴目标宽度，根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据包括：根据横轴目标宽度调整Echarts图表的横轴边距并在调整横轴边距后的Echarts图表的横轴上显示待显示的横轴数据。

为了实现上述目的，根据本申请的另一方面，提供了一种Echarts图表的数据显示装置。该装置包括：第一获取单元，用于获取待显示数据，其中，待显示数据为需要在Echarts图表上进行显示的数据；第二获取单元，用于在待显示数据中获取字符长度最长的数据，得到目标数据；绘制单元，用于创建canvas画布并在canvas画布上绘制目标数据；计算单元，用于计算目标宽度，其中，目标宽度为目标数据在canvas画布上所占据的宽度；以及第一显示单元，用于根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据。

进一步地，计算单元包括：第一确定模块，用于确定绘制目标数据的像素点在canvas画布上的起始位置；第二确定模块，用于确定绘制目标数据的像素点在canvas画布上的终止位置；以及第一计算模块，用于根据起始位置和终止位置计算目标宽度。