一点点前端代码,使用ECharts插入柱状图
来源:互联网 发布:机房机柜网络整改 编辑:程序博客网 时间:2024/06/14 08:44
一、前提
现在我们在做一些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);
阅读全文
0 0
- 一点点前端代码,使用ECharts插入柱状图
- Echarts柱状图js代码
- echarts中的柱状图使用
- echarts 柱状图页面代码(备忘)
- Echarts柱状图
- echarts-柱状图
- echarts 柱状图
- echarts柱状图
- echarts-柱状图
- echarts柱状图
- extjs 插入echarts柱状图(附带一个饼图)
- 【WEB前端】eCharts 使用笔记
- 前端一点点
- ECHARTS的基本使用:柱状图、折线图、饼图等
- Echarts柱状图与折线图的基本使用
- Echarts图标使用实例(柱状图与饼图)
- 百度echarts柱状图
- echarts 画柱状图
- 操作系统、驱动和硬件的关系的思考
- 10分钟带你看懂冒泡排序Yu选择排序
- Python3爬取某教育平台题库保存为Word文档
- U盘安装CentOS7 的注意要点
- JVM监控
- 一点点前端代码,使用ECharts插入柱状图
- 自动查找进程PID 并关闭
- elasticsearch排序
- Canvas的drawBitmap以及Paint的PorterDuffXfermode使用心得
- Tensorflow的常用函数与基本概念
- visual studio 生成的程序在其他机器上运行
- 折叠方阵的变式:蛇形折叠/回转折叠(两种方法)及说明
- spring静态资源处理
- java后台开发面试题大全