ECharts异步加载数据

痛定思痛。 2023-06-16 14:58 92阅读 0赞

### 前言 ###

现在做报表的工具和产品很多。之前用过美林数据的 ‘Tempo BI’，一款需要付费的产品，功能还是很强大的。最近，朋友需要做一个简单的报表Demo，想让我帮忙实现。为了给领导展示，如果效果不错就能提薪。所以，为了纯洁的革命友谊，我便答应了他。之所以选择使用ECharts，是因为它的兼容性好，操作方便，最重要的是开源。

### 编码实战 ###

本篇博文是基于《[SpringBoot整合Oracle数据库][SpringBoot_Oracle]》这篇文章进行修改的，所以数据也是从Oracle中提取的。后端采用Java语言，不做太多后端代码的说明，重点在ECharts的使用上。

博主以ECharts官网提供的一个“饼图”的例子进行修改，讲解ECharts如何异步加载数据。  
首先，例子中所需要的数据是\{value: ‘’,name: ‘’\}。所以博主在后台操作的时候就构建了一个这样的数据。操作Oracle使用的是JPA。

public interface UserRepository extends JpaRepository<User, Integer>, JpaSpecificationExecutor<User> { 
    
        @Query(value = "SELECT POSITION AS name,COUNT(POSITION) AS value FROM USERINFO GROUP BY POSITION",nativeQuery = true)
        List<Map<String,Object>> findUserByPositionGroup();
    }

这里写了一个sql，按照人员的岗位来进行分组。然后返回值以Map来接收，这样才能返回kay-value的形式。  
通过Debug发现，查询出来的Map中的key都是大写。所以，这里需要将Map中的所有键变为小写。提取了一个工具类。

/** * @ClassName: MapTransFormUtil * @Author: 清风一阵吹我心 * @Description: TODO map中 key 的大小写转换 * @Date: 2019/11/14 15:44 * @Version 1.0 **/
    public class MapTransFormUtil { 
        /** * 将map值全部转换为大写 */
        public static Map<String, Object> transformUpperCase(Map<String, Object> orgMap) { 
            Map<String, Object> resultMap = new HashMap<>();
            if (orgMap == null || orgMap.isEmpty()) { 
                return resultMap;
            }
            Set<String> keySet = orgMap.keySet();
            for (String key : keySet) { 
                String newKey = key.toUpperCase();
                resultMap.put(newKey, orgMap.get(key));
            }
            return resultMap;
        }
    
        /** * 将map值全部转换为小写 */
        public static Map<String, Object> transformLowerCase(Map<String, Object> orgMap) { 
            Map<String, Object> resultMap = new HashMap<>();
            if (orgMap == null || orgMap.isEmpty()) { 
                return resultMap;
            }
            Set<String> keySet = orgMap.keySet();
            for (String key : keySet) { 
                String newKey = key.toLowerCase();
                resultMap.put(newKey, orgMap.get(key));
            }
            return resultMap;
        }
    }

这样就构建出了我们想要的数据，下面就要将ECharts整合进页面中了。  
创建html页面

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    
    <div id="main" style="width: 800px;height:500px;"></div>
    </body>
    
    <script src="../static/incubator-echarts-4.5.0-rc.2/benchmark/dep/jquery/jquery-2.2.4.js"></script>
    
    <script src="../static/incubator-echarts-4.5.0-rc.2/dist/echarts.min.js"></script>
    
    <script src="../static/incubator-echarts-4.5.0-rc.2/theme/dark.js" type="text/javascript"></script>
    
    </html>

页面就是这么简单，然后需要发送ajax请求来请求后台的数据。  
官网提供了两种异步加载的方法。  
一、数据和图表样式一起加载。  
二、先加载图表样式，然后再异步获取数据填充数据。  
博主这里使用第二种方法。

可以看到第一段代码就是样式的加载，data数据为空数组。后面才发送ajax请求后台加载数据。  
请求地址：http://localhost:9000/api/user/position

{ 
      "code": 200,
      "flag": true,
      "data": [
        { 
          "name": "实施工程师",
          "value": 6
        },
        { 
          "name": "架构师",
          "value": 1
        },
        { 
          "name": "数据分析师",
          "value": 2
        },
        { 
          "name": "Java开发工程师",
          "value": 2
        },
        { 
          "name": "测试工程师",
          "value": 1
        }
      ],
      "message": "返回成功"
    }

最后进行数据的填充。展示效果如下图：  
![format_png][]

关于ECharts的异步加载数据就讲完了，不同的图表所需的数据不一样。这些是需要自己去构建的。

> 勿谓言之不预也

[SpringBoot_Oracle]: https://blog.csdn.net/qq_32101993/article/details/103096198
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tLnFmY3d4LnRvcC9lY2hhcnRzLzEucG5n?x-oss-process=image/format,png