ECharts實現資料圖表分析及程式碼

傑瑞教育發表於2015-05-30
Echarts

一、ECharts介紹

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

二、實現應用案例

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

案例效果：

條形圖

使用ECharts實現資料圖表分析

切換折線圖

使用ECharts實現資料圖表分析

檢視圖形資料

使用ECharts實現資料圖表分析

三、如何使用ECharts

1、環境搭建

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

使用ECharts實現資料圖表分析

將build/dist目錄下的內容拷貝到專案中 如圖所示：

使用ECharts實現資料圖表分析

2、在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>

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(){
        //獲得後臺資料
        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>

4、後臺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()); }

相關文章