使用ECharts實現數據圖表分析

 
1、ECharts介紹

  實現對統計數據的圖形分析以前用過JFreeChar,但它是用純java實現編碼繁瑣且效果不佳,後來又使用過Fusioncharts 報表工具,它是基於Flash的圖表組件、以XML爲數據、提供豐富的Flash動畫做爲圖標模板,實現簡單效果不錯但flash是老東西了且瀏覽器須要flash插件的支持,更關鍵的是手機端瀏覽器基本上不支持。最近看到百度提供一套ECharts(Enterprise Charts)商業產品圖表庫,它是基於ZReader(一個全新的輕量級canvas類庫),可在pc和移動端流暢的運行,支持折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、K線圖、餅圖(環形圖)等12類圖表。javascript

2、實現應用案例

  下面就結合應用看看ECharts的使用html

  案例效果:java

  條形圖jquery

 

  切換折線圖ajax

 

   查看圖形數據數據庫

 

3、如何使用ECharts

一、環境搭建

  下載echarts-2.2.2,官網地址:http://echarts.baidu.com/json

 

  將build\dist目錄下的內容拷貝到項目中 如圖所示:canvas

 

二、在sell_char.html頁面中引入文件

  chart目錄下存放了12種圖形的js文件,可根據須要引入,這也是官方推薦的導入方式(模塊化單文件引入)瀏覽器

複製代碼
<head> <script src="echarts/dist/echarts.js"></script> <script src="jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){//jquery的文檔就緒函數 // 路徑配置 require.config({ paths: { echarts: 'echarts/dist' } }); require( [ 'echarts',//代指echarts設置的路徑,即'echarts/dist' 'echarts/chart/bar', // 使用柱狀圖加載bar模塊,引入bar.js 'echarts/chart/line'//加載折線圖,引入line.js文件, 按需加載 ], function (ec) { var myChart = ec.init(document.getElementById('sell_data')); var option = { //配置選項,使用echarts的關鍵部分 ... } myChart.setOption(option); }); </script> </head> <!-- 爲ECharts準備一個具有大小的區域,必須指定高度 --> <div id="sell_data" style="height:400px"></div>
複製代碼

三、sell_char.html完整的代碼

複製代碼
 <!-- ECharts單文件引入 --> <script src="echarts/dist/echarts.js"></script> <script src="jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ //得到後臺數據 var category_data;//類型信息 var soft_data;//軟件部銷售數據 var net_data;//網絡部銷售數據 var mobile_data;//移動事業部銷售數據 $.ajax({ url:'/21-sun/echarts/EChartsDataServelt', async:false, success: function(data){ category_data=data.category; soft_data=data.soft_data; net_data=data.net_data; mobile_data=data.mobile_data;} }) // 路徑配置 require.config({ paths: { echarts: 'echarts/dist' } }); require( [ 'echarts', 'echarts/chart/bar', // 使用柱狀圖就加載bar模塊,按需加載 'echarts/chart/line' ], function (ec) { // 基於準備好的dom,初始化echarts圖表 var myChart = ec.init(document.getElementById('sell_data')); var option = { tooltip: {//提示框,鼠標懸浮交互時的信息提示 show: true }, toolbox:{//定義工具按鈕 show : true, feature : { dataView : {show: true, readOnly: false},//數據信息按鈕 magicType : {show: true, //顯示折線、柱狀圖等切換按鈕 type: ['line', 'bar','stack', 'tiled']} } }, legend: {//圖例 data:['軟件部','網絡板塊','移動事業部'] }, xAxis : [//x軸設置 { type : 'category',//x軸顯示類別 data : category_data //["第一季度","第二季度","第三季度","第四季度"] } ], yAxis : [//y軸設置 { type : 'value' //y軸顯示數據值 } ], series : [ { "name":"軟件部", "type":"bar", "data":soft_data //[80, 300, 200, 100] }, { "name":"網絡板塊", "type":"bar", "data":net_data //[50, 200, 120, 200] }, { "name":"移動事業部", "type":"bar", "data":mobile_data //[20, 60, 30, 15] } ] }; // 爲echarts對象加載數據 myChart.setOption(option); } ); }); </script> </head> <body> <div id="sell_data" style="height:400px"></div> <!-- ECharts單文件引入 --> </body> </html>
複製代碼

四、後臺EChartsDataServelt代碼

複製代碼
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/json; charset=utf-8"); JSONObject jsonObj=new JSONObject(); //後臺數據,這裏給定數據就不從數據庫獲取了 Map map=new HashMap(); map.put("category", new String[]{"第一季度","第二季度","第三季度","第四季度"}); map.put("soft_data", new int[]{80, 300, 200, 100} ); map.put("net_data", new int[]{50, 200, 120, 200}); map.put("mobile_data",new int[]{20, 60, 30, 15}); jsonObj.putAll(map); response.getWriter().println(jsonObj.toString()); }
複製代碼

 

  想要了解更多內容的小夥伴,能夠點擊查看源碼,親自運行測試。網絡

相關文章
相關標籤/搜索