echarts的簡單應用之（一）柱形圖
阿新 • • 發佈：2018-07-24
main ajax請求 java 重新 fun category .get 加載 修改
前段時間做項目需要繪制一些圖表來展示信息，從網上資料來看用的比較多的是百度開源的echarts。echarts的官網上有API以及demo。上面的圖形都是非常炫的，不過都是靜態
數據，我們做項目時不可能都用靜態數據，特別是做監控、管理等方面，需要前後臺數據的交互。下面是我得簡單總結，就直接貼代碼了。
首先是從官網上學來的一個demo，其中用到的js文件都可以官網上下載到，代碼如下：
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>ECharts-demo-柱形圖</title> 5 <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> 6 </head> 7 <body> 8 <!-- 為ECharts準備一個具備大小（寬高）的Dom --> 9 <div id="main" style="height: 400px"></div> 10 <!-- ECharts單文件引入 --> 11 <script type="text/javascript"> 12 // 基於準備好的dom，初始化echarts圖表 13 var myChart = echarts.init(document.getElementById(‘main‘)); 14 15 var option = { 16 tooltip : { 17 show : true 18 }, 19 legend : { 20 data : [ ‘銷量‘ ] 21 }, 22 xAxis : [ {23 type : ‘category‘, 24 data : [ "襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子" ] 25 } ], 26 yAxis : [ { 27 type : ‘value‘ 28 } ], 29 series : [ { 30 "name" : "銷量", 31 "type" : "bar", 32 "data" : [ 5, 20, 40, 10, 10, 20 ] 33 } ] 34 }; 35 36 // 為echarts對象加載數據 37 myChart.setOption(option); 38 </script> 39 </body>
其運行結果如圖：
從官網上的實例中可以看到各種不同的圖形，我們可以直接在網上編輯，修改成我們想要的模型，然後將整個option復制到demo中的option上，就可以得到一個靜態數據的圖形。
接下來就是從後臺取數據了。代碼如下：（只貼出option部分和ajax請求的部分）
1 var levels= []; // 等級的數組 2 var nums= []; // 數量的數組 3 4 var myChart = echarts.init(main[0]); // main 是設置的圖表的id 5 $.ajax({ 6 type: "post", 7 url : "getPieInfo.action", 8 dataType: "json", 9 data : {}, 10 success: function(result){ 11 if (result != null && result.length > 0) { 12 for(var i=0;i<result.length;i++){ 13 levels.push(result[i].level); 14 nums.push(result[i].num); 15 } 16 } 17 18 myChart.setOption({ //載入數據 19 tooltip: { 20 show: true, 21 trigger: ‘axis‘, 22 }, 23 legend: { 24 data:[‘級別統計‘] 25 }, 26 toolbox: { 27 show : true, 28 feature : { 29 mark : {show: true}, // 輔助線標誌 30 dataView : {show: true, readOnly: false}, // 數據視圖 31 magicType : {show: true, type: [‘line‘, ‘bar‘]}, // 動態類型轉換（折線柱形互轉） 32 restore : {show: true}, // 還原 33 saveAsImage : {show: true} // 保存圖片 34 } 35 }, 36 calculable : true, // 啟用拖拽，重新計算 37 xAxis: { 38 type : ‘category‘, 39 data: levels //填入X軸數據 40 }, 41 yAxis : { 42 type : ‘value‘ 43 }, 44 series: { 45 name: ‘數量‘, 46 type: ‘bar‘, 47 data: nums 48 } 49 }); 50 } 51 })
後臺代碼就是普通的SSM框架寫的，這裏不多敘述。
其數據庫如下：
最終運行結果：
如果文中有什麽錯誤或問題可以和我交流，郵箱[email protected].
echarts的簡單應用之（一）柱形圖