首页 > 代码库 > JAVA开发人员画图表总结(ECHARTS)

JAVA开发人员画图表总结(ECHARTS)

随着大数据的到来,越来越多的数据需求需要开发,而这些需求不可避免需要使用JS画出图表,而大多后端JAVA开发人员对JS不太熟悉,导致身心倍受折磨,今天记录以下最近我使用echarts的步骤,供参考:

一、环境说明

前端框架:echarts、Jquery

后端框架:SPRINGMVC

二、开发过程

前端代码:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height: 400px"></div>
    <script type="text/javascript">
        $(function() {
            $.ajax({
                url : "http://www.qunar.com/getJson",  //获取JSON地址
                dataType : "text",
                success : function(data) {
                    var result = eval(data);
                    
                    // 路径配置
                    require.config({
                        paths : {
                            echarts : http://echarts.baidu.com/build/echarts,
                            echarts/chart/bar : http://echarts.baidu.com/build/echarts
                        }
                    });
                    var myChart;
                    // 使用
                    require([ echarts, echarts/chart/bar // 使用柱状图就加载bar模块,按需加载
                    ], function(ec) {
                        // 基于准备好的dom,初始化echarts图表
                        myChart = ec.init(document.getElementById(main));
                        // 为echarts对象加载数据 
                        myChart.setOption(result[0]);
                    });                    
                    
                }
            });
        });
    </script>
</body>
</html>

对于我来说,编写这些JS最困难了。

1、首先需要AJAX获取数据

2、需要与echarts相互结合

3、option这个对象是核心,后端需要生成的也是这个对象。

获取的后端数据:

[{"calculable":true,"graphType":null,"legend":{"data":["报表"]},"series":[{"data":[1,2,3],"name":"报表","type":"bar"}],"title":{"color":"red","fontSize":24,"link":"http://www.qunar.com","subText":"报表","text":"去哪儿-报表"},"tootip":{"show":true},"xAxis":{"data":[1,2,3],"type":"category"},"yAxis":{"data":[],"type":"value"}}]

后端如何生成这些JSON数据就不在这里说了,任何提供REST服务或者SpringMVC都能实现。这里需要注意的是,如果想要长期使用echarts,建议还是好好阅读文档,因为任何的小错误,都可能导致效果相差很大。