隨着大數據的到來，越來越多的數據需求需要開發，而這些需求不可避免需要使用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，建議還是好好閱讀文檔，因為任何的小錯誤，都可能導致效果相差很大。