JAVA实现百度ECharts图表

POM.xml

<!--ECharts-Java-->
		<dependency>
			<groupId>com.github.abel533</groupId>
			<artifactId>ECharts</artifactId>
			<version>3.0.0</version>
		</dependency>

JAVA代码

public Object regMap(String app_key){
        // 取出用户归属地信息
        Result att = accountFeignClient.getRegAttribution(app_key);
        // 组装返回结果数据主体
        List<Map<String, Object>> list = (List<Map<String, Object>>) att.getData();
        // 组装ECharts数据主体
        GsonOption option = new GsonOption();
        // 创建Option
        Title title = new Title(); // 设置title
        title.setText("借钱帮全国注册地区占比"); // 标题
        title.setSubtext("数据来源:借钱帮数据服务器"); // 副标题
        title.setX("center"); // 标题的位置
        option.title(title).tooltip(Trigger.item); // 设置tooltip
        //饼图数据 - 第一个
        Pie pie = new Pie("JQB注册人数");
        //循环数据
        for (Map<String, Object> objectMap : list) {
            //饼图数据
            String city = objectMap.get("att").toString(); // 城市
            Object number = objectMap.get("coo"); // 数量
            pie.data(new PieData(city, number));
        }
        //饼图的圆心和半径
        pie.center(400,380).radius(250);
        /**    第二个饼 - Start    **/
        Result atta = accountFeignClient.getRegAttribution("ZQXQ-HYQDB");
        // 组装返回结果数据主体
        List<Map<String, Object>> lista = (List<Map<String, Object>>) atta.getData();
        Pie pie1 = new Pie("HYQDB注册人数");
        //循环数据
        for (Map<String, Object> objectMap : lista) {
            //饼图数据
            String city = objectMap.get("att").toString(); // 城市
            Object number = objectMap.get("coo"); // 数量
            pie1.data(new PieData(city, number));
        }
        //饼图的圆心和半径
        pie1.center(1100,380).radius(250);
        /**    第二个饼 - End    **/
        //设置数据
        option.series(pie,pie1);
        logger.info("图标数据:"+option);
        return option.toString();
    }

HTML

<div style="padding:10px;clear: both;">
    <div id="psLine" style="height:700px;"></div>
</div>

JS

$.ajax({
                type : "GET",
                url : "/lth/user/regMap",
                data: {'app_key': this.app_key},
                dataType : "json",
                success : function(data) {
                    var myChart = echarts.init(document.getElementById('psLine'));
                    myChart.setOption(data, true);
                }
            });
上一篇:  Centos7 docker启动镜像报iptables错的解决方法
下一篇:  为网站启用HTTPS  
评论

如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ