| 一、ECharts介紹 |
實現(xiàn)對統(tǒng)計數(shù)據(jù)的圖形分析之前用過JFreeChar，但它是用純java實現(xiàn)編碼繁瑣且效果不佳，后來又使用過Fusioncharts 報表工具，它是基于Flash的圖表組件、以xml為數(shù)據(jù)、提供豐富的Flash動畫作為圖標(biāo)模板，實現(xiàn)簡單效果不錯但flash是老東西了且瀏覽器需要flash插件的支持，更關(guān)鍵的是手機端瀏覽器基本上不支持。最近看到百度提供一套ECharts（EnterPRise Charts）商業(yè)產(chǎn)品圖表庫，它是基于ZReader（一個全新的輕量級canvas類庫），可在pc和移動端流暢的運行，支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）等12類圖表。
| 二、實現(xiàn)應(yīng)用案例 |
下面就結(jié)合應(yīng)用看看ECharts的使用
案例效果：
條形圖
切換折線圖
查看圖形數(shù)據(jù)
| 三、如何使用ECharts |
下載echarts-2.2.2,官網(wǎng)地址：http://echarts.baidu.com/
將build/dist目錄下的內(nèi)容拷貝到項目中 如圖所示：
chart目錄下存放了12種圖形的js文件，可根據(jù)需要引入，這也是官方推薦的導(dǎo)入方式（模塊化單文件引入）
<head><script src="echarts/dist/echarts.js"></script><script src="jquery/jquery-1.7.2.min.js"></script><script type="text/Javascript"> $(function(){//jquery的文檔就緒函數(shù) // 路徑配置 require.config({ paths: { echarts: 'echarts/dist' } }); require( [ 'echarts',//代指echarts設(shè)置的路徑，即'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的關(guān)鍵部分 ... } myChart.setOption(option); });</script></head><!-- 為ECharts準(zhǔn)備一個具備大小的區(qū)域，必須指定高度 --><div id="sell_data" style="height:400px"></div>3、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(){ //獲得后臺數(shù)據(jù) var category_data;//類型信息 var soft_data;//軟件部銷售數(shù)據(jù) var net_data;//網(wǎng)絡(luò)部銷售數(shù)據(jù) var mobile_data;//移動事業(yè)部銷售數(shù)據(jù) $.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) { // 基于準(zhǔn)備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('sell_data')); var option = { tooltip: {//提示框，鼠標(biāo)懸浮交互時的信息提示 show: true }, toolbox:{//定義工具按鈕 show : true, feature : { dataView : {show: true, readOnly: false},//數(shù)據(jù)信息按鈕 magicType : {show: true, //顯示折線、柱狀圖等切換按鈕 type: ['line', 'bar','stack', 'tiled']} } }, legend: {//圖例 data:['軟件部','網(wǎng)絡(luò)板塊','移動事業(yè)部'] }, xAxis : [//x軸設(shè)置 { type : 'category',//x軸顯示類別 data : category_data //["第一季度","第二季度","第三季度","第四季度"] } ], yAxis : [//y軸設(shè)置 { type : 'value' //y軸顯示數(shù)據(jù)值 } ], series : [ { "name":"軟件部", "type":"bar", "data":soft_data //[80, 300, 200, 100] }, { "name":"網(wǎng)絡(luò)板塊", "type":"bar", "data":net_data //[50, 200, 120, 200] }, { "name":"移動事業(yè)部", "type":"bar", "data":mobile_data //[20, 60, 30, 15] } ] }; // 為echarts對象加載數(shù)據(jù) myChart.setOption(option); } ); }); </script></head><body> <div id="sell_data" style="height:400px"></div> <!-- ECharts單文件引入 --></body></html>4、后臺EChartsDataServelt代碼public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/json; charset=utf-8"); JSONObject jsonObj=new JSONObject(); //后臺數(shù)據(jù)，這里給定數(shù)據(jù)就不從數(shù)據(jù)庫獲取了 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()); }想要了解更多內(nèi)容的小伙伴，可以點擊查看源碼，親自運行測試。
疑問咨詢或技術(shù)交流，請加入官方QQ群：
（452379712）
新聞熱點
疑難解答
