一点点前端代码，使用ECharts插入柱状图

一、前提

现在我们在做一些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);