ECharts异步加载数据-蒲公英云

前言

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

编码实战

本篇博文是基于《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>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 800px;height:500px;"></div>
</body>
<!-- 引入 jquery 文件 -->
<script src="../static/incubator-echarts-4.5.0-rc.2/benchmark/dep/jquery/jquery-2.2.4.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="../static/incubator-echarts-4.5.0-rc.2/dist/echarts.min.js"></script>
<!-- 引入 vintage 主题 -->
<script src="../static/incubator-echarts-4.5.0-rc.2/theme/dark.js" type="text/javascript"></script>
</html>

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

var myChart = echarts.init(document.getElementById('main'), 'dark');
    //显示标题，图例和空的坐标轴
    myChart.setOption({ 
        title: { 
            text: '用户分类',
            subtext: '纯属虚构',
            x: 'center'
        }, tooltip: { 
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        }, legend: { 
            orient: 'vertical',
            left: 'left',
            data: []
        }, series: [
            { 
                name: '分类',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [],
                itemStyle: { 
                    emphasis: { 
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    });
    // 加载
    myChart.showLoading();
    var names = [];
    // 发送ajax请求
    $.ajax({ 
        type: 'GET',
        async: true,
        url: '/api/user/position',
        dataType: 'JSON',
        success: function (result) { 
            if (result.code === 200) { 
                let data = result.data;
                for (var index in data) { 
                    names.push(data[index].name);
                }
                console.info(names);
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ 
                    legend: { 
                        data: names
                    }, series: [
                        { 
                            data: result.data
                        }
                    ]
                });
            } else { 
                alert("后台获取数据失败!");
            }
        },
        error: function (errorMsg) { 
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });

可以看到第一段代码就是样式的加载，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": "返回成功"
}