JAVA開發人員畫圖表總結（ECHARTS）

時間 2019-11-10

標籤 java 開發人員圖表總結 echarts 欄目 Java 简体版

原文原文鏈接

隨着大數據的到來，愈來愈多的數據需求須要開發，而這些需求不可避免須要使用JS畫出圖表，而大多後端JAVA開發人員對JS不太熟悉，致使身心倍受折磨，今天記錄如下最近我使用echarts的步驟，供參考：javascript

1、環境說明

前端框架：echarts、Jqueryhtml

後端框架：SPRINGMVC前端

2、開發過程

前端代碼：

<!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最困難了。java

一、首先須要AJAX獲取數據ajax

二、須要與echarts相互結合後端

三、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，建議仍是好好閱讀文檔，由於任何的小錯誤，均可能致使效果相差很大。echarts