Apache ECharts 插件折线图展示问题分析

IT那活儿 2023-03-11

658

点击上方“IT那活儿”公众号，关注后了解更多内容，不管IT什么活儿，干就完了！！！

前言

我们近些年做了一个可视化看板模块，这个模块实现了报表和拓扑图可视化配置以及实时展示数据等功能，现在已经在多个场地部署使用，其中报表中的如折线图、柱状图、散点图等组件的功能展示，均基于开源组件 Apache ECharts 封装实现。

各场地在使用前台看板模块进行报表配置折线图时，出现了折线图显示异常的问题，我们根据现场反馈的数据模拟问题分析解决过程。

问题描述

某场地反馈，前台看板配置的折线图展示存在问题，总数据量在 1w+ ，配置成 8 条折线，但每条折线的长度都只有折线图表长度的 1/8 左右，后续部分显示为空白，如下图所示：

问题分析

1. 原始数据分析

从现场导出的原始数据来看，是以第一列的数据作为 X 轴，以第二列的数据作为分组条件，通过 SQL 中的 case……when…… 将第三列的数据分组成 8 条作为折线数据进行展示，总数量在 1w+ ，按条件拆分后每条数据的数据量在 1.3k 左右，如下图所示：

2. 数据格式分析

按照原始数据来看，如果折线图是按照（X, Y）这种点对点的方式展示数据的话，是不会出现上述问题的，因此可能是 ECharts 的在数据处理上和我们的理解有偏差。

在 ECharts 的数据格式中，X 轴的数据保存在 xAxis 中，分组信息保存在 legend 中，每条折线的信息保存在 series 中，可以看到，在数据格式中 X 轴和每条折线的数据都只是一个个数组，而不是我们想像的（X, Y）这种数据格式，数据中也没有 X 轴数据与折线数据的关联关系。

option = {
 title: {
   text: 'Stacked Line'
 },
 tooltip: {
   trigger: 'axis'
 },

# 分组信息
 legend: {
   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
 },
 grid: {
   left: '3%',
   right: '4%',
   bottom: '3%',
   containLabel: true
 },
 toolbox: {
   feature: {
     saveAsImage: {}
   }
 },

# X 轴数据
 xAxis: {
   type: 'category',
   boundaryGap: false,
   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 },
 yAxis: {
   type: 'value'
 },

# 折线数据
 series: [
   {
     name: 'Email',
     type: 'line',
     stack: 'Total',
     data: [120, 132, 101, 134, 90, 230, 210]
   },
   {
     name: 'Union Ads',
     type: 'line',
     stack: 'Total',
     data: [220, 182, 191, 234, 290, 330, 310]
   },
   {
     name: 'Video Ads',
     type: 'line',
     stack: 'Total',
     data: [150, 232, 201, 154, 190, 330, 410]
   },
   {
     name: 'Direct',
     type: 'line',
     stack: 'Total',
     data: [320, 332, 301, 334, 390, 330, 320]
   },
   {
     name: 'Search Engine',
     type: 'line',
     stack: 'Total',
     data: [820, 932, 901, 934, 1290, 1330, 1320]
   }
 ]
};

3. 分析结果

那么问题就找到了，原始数据在被程序处理成 ECharts 的数据格式后，就会有出现这种情况，xAxis 中保存的 X 轴的数据量有 1w+，而 series 保存的折线数量有 8 条，每条的数据量只有 1.3k。

按照 ECharts 的处理逻辑，首先渲染了一个 X 轴长度为 1w 的坐标系，然后将 8 条折线的数据依次渲染出来，每条折线的数据量为 1.3k ，而数据的对应关系确实，X 轴的第 1 个数据分别对应 8 条折线的第 1 个数据，X 轴的第 2 个数据分别对应 8 条折线的第 2 个数据……X 轴的第 n 个数据分别对应 8 条折线的第 n 个数据。当对应到 1.3k 后，8 条折线已经没有数据了，而 X 轴还有很多的数据无法找到对应。于是就出现了问题描述中的情况，每条折线的长度都只有折线图表长度的 1/8 左右，后续部分显示为空白。

问题处理

由于这个问题属于 ECharts 的数据处理逻辑问题，通过ECharts 最新版本样例中，导入数据，发现问题还存在，处理逻辑也没有改变。

因此无法通过升级 ECharts 版本进行问题修复，同样也无法在程序上进行处理，只能想办法避免。

使用 ECharts 的折线图进行数据展示时，需要每条折线的数据量和 Y 轴的数据量保持一致，也就是说，展示的数据最好在数据库中是如下图中的这种存储方式，而非将一列的数据进行拆分。