一、前提

現在我們在做一些web前端，將我們的一些自動化工具整合和視覺化。
下面的工作是想在web頁面上插入一個柱狀圖顯示不同型別測試賬號的使用情況。
java工程採用的jsp。下面是引用的jsp介紹。

JSP 與 PHP、ASP、ASP.NET 等語言類似，執行在服務端的語言。
JSP（全稱Java Server Pages）是由 Sun Microsystems 公司倡導和許多公司參與共同建立的一種使軟體開發者可以響應客戶端請求，而動態生成 HTML、XML 或其他格式文件的Web網頁的技術標準。
JSP 技術是以 Java 語言作為指令碼語言的，JSP 網頁為整個伺服器端的 Java 庫單元提供了一個介面來服務於HTTP的應用程式。
JSP檔案字尾名為 *.jsp 。
JSP開發的WEB應用可以跨平臺使用，既可以執行在 Linux 上也能執行在 Windows 上。

二、echarts的下載

地址：   http://echarts.baidu.com/download.html
這裡我使用的是精簡版，只包含基礎圖表：折 柱 餅

三、echarts的使用

將下載裡的echarts.simple.min.js的指令碼複製到工程的該位置。前端工程

四、java方法連線資料庫獲取賬號使用情況

<%!%>是宣告標籤，用來定義成員變數屬性和方法的。在啟tomcat時，jsp程式碼會被編譯為java檔案，所有程式碼被包含為一個方法。方法裡面不能再有方法。
這裡是java方法，java連線使用資料庫不在這裡介紹了～countNum是查詢賬號的總數，countNumBusy是查詢被佔用的賬號。

<%!
    public int countNum(String type) throws Exception{
        Connection con = JdbcUtil.getConnection();
        PreparedStatement ps = null;
        ResultSet rs = null;
        int num=0;
        try {
            if(type=="BLUE"){
                ps = con.prepareStatement("select count(*) from "
 
 + XXXXXtablenameXXXX + " where type LIKE 'BLUE%'");

            }else {
                ps = con.prepareStatement("select count(*) from " + XXXXXtablenameXXXX + " where type=\"" + type + "\"");
            }
            rs = ps.executeQuery();
            if(rs.next())
            num= rs.getInt(1);  //因為Resultset的第一行的第一列都是空的，要用rs.next()到第一行才能進行讀取。取第一個數下標取1
        }catch (SQLException e) {
            // TODO Auto-generated catch block
            throw new Exception(e);
        } finally {
            JdbcUtil.close(rs, ps, con);
        }
        return num;
    }

    public int countNumBusy(String type) throws Exception{
        Connection con = JdbcUtil.getConnection();
        PreparedStatement ps = null;
        ResultSet rs = null;
        int num=0;
        try {
            if(type=="BLUE") {
                ps = con.prepareStatement("select count(*) from " + XXXXXtablenameXXXX + " where state=1 AND type LIKE 'BLUE%'");

            }else {
                ps = con.prepareStatement("select count(*) from " + XXXXXtablenameXXXX + " where state=1 AND type=\"" + type + "\"");

            }
            rs = ps.executeQuery();
            if(rs.next())
                num= rs.getInt(1);
        }catch (SQLException e) {
            // TODO Auto-generated catch block
            throw new Exception(e);
        } finally {
            JdbcUtil.close(rs, ps, con);
        }
        return num;
    }
%>

五、引用java方法獲取賬號數量

<%%>這個裡面可以進行屬性的定義,可以輸出內容。這個方法就是伺服器向客戶端輸出內容的地方,它本身就是一個方法。（這對標籤裡面的內容將來是在此jsp被編譯為servlet的時候放在了_jspService()方法裡面）

<%
        int xxxxtypeName1=countNum("xxxxxtype");
        int xtypeNameBusy1=countNumBusy("xxxxxtype");
        int xxxxtypeName2=countNum("xxxxxtype");
        int xtypeNameBusy2=countNumBusy("xxxxxtype");
        3
        4
        .....
%>

六、資料得到了然後就可以畫圖了

• 在head裡引入ECharts 檔案，路徑是我之前下載指令碼放置的位置

<script src="../dist/js/echarts.min.js"></script>

• 寫指令碼進行畫圖

<!-- 為ECharts準備一個具備大小（寬高）的Dom position:absolute;right:0px是讓柱狀圖插在
頁面的右下方-->
    <div id="main" style="width: 800px;height:400px;position:absolute;right:0px"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));
        var data1 = [<%=xxxxtypeName1%>, <%=xxxxtypeName2%>,..., ...,...];
        var data2 = [<%=xxxxtypeNameBusy1%>, <%=xxxxtypeNameBusy2%>,..., ...,...];
        var scales = new Array(7);
        // 計算賬號使用百分比
        for (var i = 0; i < data1.length; i++) {
            scales[i] = parseInt(data2[i] * 10000 / data1[i]) / 100;
        }

        // 指定圖表的配置項和資料
        var option = {
                    xAxis: {
                        data: ['name1:' + scales[0] + "%", 'name2:' + scales[1] + "%", 'name3:' + scales[2] + "%", ..., ...],
                        axisTick: {show: true},
                        name: "賬號型別"

                    },
                    yAxis: {
                        splitLine: {show: true},
                        name: "賬號數量"
                    },
                    animationDurationUpdate: 1200,
                    barGap: 0.1, //兩個柱之間的距離
                    series: [{
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#ddd',
                                label: {
                                    show: true,//頂部數字是否展示
                                    position: 'top',
                                    textStyle: {
                                        fontWeight: 'bolder',
                                        fontSize: '12',
                                        fontFamily: '微軟雅黑',
                                        color: '#000'
                                    }
                                }
                            }
                        },
                        silent: true,
                        barWidth: 40,
                        barGap: '-100%', // Make series be overlap
                        data: data1,
                    }, {
                        type: 'bar',
                        barWidth: 40,
                        z: 10,
                        data: data2,
                        //頂部數字展示pzr
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,//是否展示
                                    position: 'top',
                                    textStyle: {
                                        fontWeight: 'bolder',
                                        fontSize: '12',
                                        fontFamily: '微軟雅黑',
                                        color: '#000'
                                    }
                                }
                            }
                        }
                    }]
                };
        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);