hbase可视化
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" import="java.sql.*"%> <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <form > <table align="center"> <tr> <%String limit = ""; String limit2 = ""; %> <td> 单位名: <input type="text" name="limit" value="<%=limit%>"> </td> <td> 需求名:<input type="text" name="limit2" value="<%=limit2%>"> <input type="submit" name="submit" id="submit" value="查询" > </td> </tr> </table> </form> <form name="form1" id="form1" action=""> <table align="center" border="1" width="900" name="table1" id="table1"> <tbody id="table"> <tr> <td>ip</td> <!-- <td>需求状态</td> --> <td>数量</td> </tr> <jsp:useBean id="db" class="DBBean.Bean" scope="page" /> <% String Ip = ""; String data = ""; String time = ""; String number = ""; String type = ""; String sql=""; String sql2=""; String tijiao=""; String baocun=""; String data1=""; String data2=""; String data3=""; String data4=""; String data5=""; String data6=""; String ata1=""; String ata2=""; String ata3=""; String ata4=""; String ata5=""; String ata6=""; String order = request.getParameter("limit"); String order2 = request.getParameter("limit2"); String ip1="119.131.143.179"; String ip2="114.248.224.214"; String ip3="115.193.172.253"; String ip4="183.39.154.199"; String ip5="117.100.231.8"; String ip6="122.71.75.164"; // System.out.println("需求管理界面的：" + Iname); sql="select count(case when ip=\'119.131.143.179\' then 1 end) as\'119.131.143.179\',count(case when ip=\'114.248.224.214\' then 1 end) as\'114.248.224.214\',count(case when ip=\'115.193.172.253\' then 1 end) as\'115.193.172.253\',count(case when ip=\'183.39.154.199\' then 1 end) as\'183.39.154.199\', count(case when ip=\'117.100.231.8\' then 1 end) as\'117.100.231.8\', count(case when ip=\'122.71.75.164\' then 1 end) as\'122.71.75.164\'from hbase"; //sql="select ip from "; // sql2="select count(case when iresult=\'已提交\' then 1 end) as 已提交,count(case when iresult=\'已保存\' then 1 end) as 已保存,count(case when iresult=\'形式审核未通过\' then 1 end) as 形式审核未通过,count(case when iresult=\'形式审核通过\' then 1 end) as 形式审核通过, count(case when iresult=\'技术审核未通过\' then 1 end) as 技术审核未通过, count(case when iresult=\'技术审核通过\' then 1 end) as 技术审核通过 from xuqiu"; ResultSet da = db.executeQuery(sql); while (da.next()) { //System.out.println(rs.getString(1)); //可以输出Inamenum的所有值 比如Iname为图书馆 那么输出图书馆1 图书馆2 图书馆3 data1=da.getString(1); data2=da.getString(2); data3=da.getString(3); data4=da.getString(4); data5=da.getString(5); data6=da.getString(6); out.println("<tr><td>" +ip1 + "</td><td>" + data1 + "</td></tr>"); out.println("<tr><td>" +ip2 + "</td><td>" + data2 + "</td></tr>"); out.println("<tr><td>" +ip3 + "</td><td>" + data3 + "</td></tr>"); out.println("<tr><td>" +ip4 + "</td><td>" + data4 + "</td></tr>"); out.println("<tr><td>" +ip5 + "</td><td>" + data5 + "</td></tr>"); out.println("<tr><td>" +ip6 + "</td><td>" + data6 + "</td></tr>"); } %> </tbody> </table> </form> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/china.js"></script> <script type="text/javascript" src="keshihua/bingtu/world.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; option = { tooltip: { trigger: \'item\', formatter: \'{a} <br/>{b}: {c} ({d}%)\' }, legend: { orient: \'vertical\', left: 10, data: [\'119.131.143.179\', \'114.248.224.214\', \'115.193.172.253\', \'183.39.154.199\', \'117.100.231.8\', \'122.71.75.164\'] }, series: [ { name: \'访问来源\', type: \'pie\', radius: [\'50%\', \'70%\'], avoidLabelOverlap: false, label: { show: false, position: \'center\' }, emphasis: { label: { show: true, fontSize: \'30\', fontWeight: \'bold\' } }, labelLine: { show: false }, data: [ {value: <%=data1%>, name: \'119.131.143.179\'}, {value: <%=data2%>, name: \'114.248.224.214\'}, {value: <%=data3%>, name: \'115.193.172.253\'}, {value: <%=data4%>, name: \'183.39.154.199\'}, {value: <%=data5%>, name: \'117.100.231.8\'}, {value: <%=data6%>, name: \'122.71.75.164\'} ] } ] }; ; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> <div id="container2" style="height: 100%"></div> <script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/china.js"></script> <script type="text/javascript" src="keshihua/bingtu/world.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container2"); var myChart2 = echarts.init(dom); var app = {}; option = null; option = { tooltip: { trigger: \'item\', formatter: \'{a} <br/>{b}: {c} ({d}%)\' }, legend: { orient: \'vertical\', left: 10, data: [\'119.131.143.179\', \'114.248.224.214\', \'115.193.172.253\', \'183.39.154.199\', \'117.100.231.8\', \'122.71.75.164\'] }, series: [ { name: \'访问来源\', type: \'pie\', radius: [\'50%\', \'70%\'], avoidLabelOverlap: false, label: { show: false, position: \'center\' }, emphasis: { label: { show: true, fontSize: \'30\', fontWeight: \'bold\' } }, labelLine: { show: false }, data: [ {value: <%=data1%>, name: \'119.131.143.179\'}, {value: <%=data2%>, name: \'114.248.224.214\'}, {value: <%=data3%>, name: \'115.193.172.253\'}, {value: <%=data4%>, name: \'183.39.154.199\'}, {value: <%=data5%>, name: \'117.100.231.8\'}, {value: <%=data6%>, name: \'122.71.75.164\'} ] } ] }; ; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" import="java.sql.*"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>T233</title> <script src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/china.js"></script> <script type="text/javascript" src="keshihua/bingtu/world.js"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="css/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <div id="main" style="height: 400px;width: 600px"></div> <table class="table table-bordered table-hover" id="table"> <thead> <tr> <th>动漫名称</th> <th>喜欢人数</th> </tr> </thead> <tbody> <tr id="tr1"> <td>火影忍者</td> <td>500</td> </tr> <tr id="tr2"> <td>海贼王</td> <td>300</td> </tr> <tr id="tr3"> <td>妖精的尾巴</td> <td>200</td> </tr> <tr id="tr4"> <td>死神</td> <td>400</td> </tr> <tr id="tr5"> <td>七龙珠</td> <td>600</td> </tr> </tbody> </table> <script type="text/javascript"> // 页面加载函数 $(function () { //进行echarts的初始化 var myEcharts = echarts.init(document.getElementById("main")); var option = { // 定义标题 title : { text:"环形图示例" }, // 鼠标悬停显示数据 tooltip:{ }, //图例 legend : { data: [\'火影忍者\',\'海贼王\',\'妖精的尾巴\',\'死神\',\'七龙珠\'] }, //数据 series :[ { radius:[\'55%\',\'70%\'], //半径 label:{ normal:{ // 取消在原来的位置显示 show:false, // 在中间显示 position:\'center\' }, // 高亮扇区 emphasis:{ show:true, textStyle:{ fontSize:30, fontWeight:\'bold\' } } }, data:[ // 对应图例的值 {name:\'火影忍者\',value:500}, {name:\'海贼王\',value:300}, {name:\'妖精的尾巴\',value:200}, {name:\'死神\',value:400}, {name:\'七龙珠\',value:600} ], type:\'pie\', //关掉南丁格尔图 //roseType:\'radius\' } ] }; // 设置配置项 myEcharts.setOption(option); // 设置echarts的点击事件 myEcharts.on(\'click\',function (params) { // 获取table下所有的tr let trs = $("#table tbody tr"); for (let i = 0;i<trs.length;i++){ // 获取tr下所有的td let tds = trs.eq(i).find("td"); // 先把之前的标记的success去掉 $("#table tbody tr").eq(i).removeClass(\'success\'); // 如果点击图示的名字和table下的某一个行的第一个td的值一样 if (params.name == tds.eq(0).text()){ //设置success状态 $("#table tbody tr").eq(i).addClass(\'success\'); // 跳转到页面指定的id位置 $("html,body").animate({scrollTop:$("#table tbody tr").eq(i).offset().top},1000); } } }); // 当鼠标落在tr时，显示浮动 $("#table tbody").find("tr").on("mouseenter",function () { // 获得当前匹配元素的个数 let row = $(this).prevAll().length; // 获得当前tr下td的名字 let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text(); // 设置浮动 myEcharts.dispatchAction({ type: \'showTip\',seriesIndex: 0, name:name});//选中高亮 }); // 当鼠标移开tr时候取消浮动 $("#table tbody").find("tr").on("mouseleave",function () { // 获得当前匹配元素的个数 let row = $(this).prevAll().length; // 获得当前tr下td的名字 let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text(); // 设置浮动 myEcharts.dispatchAction({ type: \'hideTip\', name:name});//选中高亮 }); }); </script> </body> </html>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" import="java.sql.*"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>饼&柱混搭图表</title> <style> /* 配置样式让两个图表显示在一行 */ div{float: left} </style> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div> <!-- 饼状图Dom --> <div id="main1" style="width: 500px;height:500px;"></div> <!-- 柱状图Dom --> <div id="main2" style="width: 500px;height:420px;"></div> </div> <!-- 引入 echarts.js --> <script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/china.js"></script> <script type="text/javascript" src="keshihua/bingtu/world.js"></script> <script type="text/javascript"> // 指定饼状图图表的配置项和数据 var option1 = { // 图表标题 title : { text: \'某站点用户访问来源\', // 标题内容 subtext: \'纯属虚构\', x:\'center\' // 居中显示 }, // 鼠标触发提示 tooltip : { trigger: \'item\', formatter: "{a} <br/>{b} : {c} ({d}%)" // 展示格式 }, // 图例 legend: { orient : \'vertical\', // 垂直显示 x : \'left\', // 显示位置--左上 data:[\'直接访问\',\'邮件营销\',\'联盟广告\',\'视频广告\',\'搜索引擎\'] }, calculable : true, series : [ { name:\'访问来源\', type:\'pie\', radius : \'55%\', center: [\'50%\', 225], data:[ {value:335, name:\'直接访问\'}, {value:310, name:\'邮件营销\'}, {value:234, name:\'联盟广告\'}, {value:135, name:\'视频广告\'}, {value:1548, name:\'搜索引擎\'} ] } ] }; // 指定柱状图图表的配置项和数据 var option2 = { tooltip : { trigger: \'axis\', axisPointer : { // 指示器类型，shadow为阴影指示器 type: \'shadow\' } }, legend: { data:[\'直接访问\',\'邮件营销\',\'联盟广告\',\'视频广告\',\'搜索引擎\'] }, // 工具栏组件 toolbox: { show : true, orient : \'vertical\', top : \'center\', feature : { mark : {show: true}, // 启用的动态类型，包括\'line\'（切换为折线图）, \'bar\'（切换为柱状图）, \'stack\'（切换为堆叠模式）, \'tiled\'（切换为平铺模式） magicType : {show: true, type: [\'line\', \'bar\', \'stack\', \'tiled\']}, restore : {show: true}, // 是否支持配置项还原 saveAsImage : {show: true} // 保存图片 } }, calculable : true, xAxis : [ { type : \'category\', data : [\'周一\',\'周二\',\'周三\',\'周四\',\'周五\',\'周六\',\'周日\'] } ], yAxis : [ { type : \'value\', splitArea : {show : true} } ], grid: { x2:40 }, series : [ { name:\'直接访问\', type:\'bar\', stack: \'总量\', data:[320, 332, 301, 334, 390, 330, 320] }, { name:\'邮件营销\', type:\'bar\', stack: \'总量\', data:[120, 132, 101, 134, 90, 230, 210] }, { name:\'联盟广告\', type:\'bar\', stack: \'总量\', data:[220, 182, 191, 234, 290, 330, 310] }, { name:\'视频广告\', type:\'bar\', stack: \'总量\', data:[150, 232, 201, 154, 190, 330, 410] }, { name:\'搜索引擎\', type:\'bar\', stack: \'总量\', data:[820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 对饼状图dom，初始化echarts实例 var myChart1 = echarts.init(document.getElementById(\'main1\')); myChart1.setOption(option1); // 按option1展示myChart1图表 // 对柱状图dom，初始化echarts实例 var myChart2 = echarts.init(document.getElementById(\'main2\')); myChart2.setOption(option2); // 将myChart1和myChart2关联起来 echarts.connect([myChart1, myChart2]) // 配置自动适应Windows窗口大小 setTimeout(function (){ window.onresize = function () { myChart.resize(); myChart2.resize(); } },200) </script> </body> </html>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" import="java.sql.*"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script> <script type="text/javascript" src="keshihua/bingtu/china.js"></script> <script type="text/javascript" src="keshihua/bingtu/world.js"></script> <title></title> </head> <body> <div id="information"style="width: 400px;float: left;"> <table border="1"> <thead> <tr> <th>日期</th> <th>产量</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>100</td> </tr> <tr> <td>2</td> <td>300</td> </tr> <tr> <td>3</td> <td>700</td> </tr> <tr> <td>4</td> <td>800</td> </tr> <tr> <td>5</td> <td>700</td> </tr> <tr> <td>6</td> <td>200</td> </tr> </tbody> </table> </div> <div id="main"style="width: 600px;height:400px;float: left;"> </div> <script type="text/javascript"> var information = []; // 数据的源头，取自于表格 var info = document.getElementById("information"); var table = info.getElementsByTagName("table"); var tr = table[0].getElementsByTagName("tr"); var myChart = echarts.init(document.getElementById(\'main\')); var chosex,chosey;//被选择的x、y //初始化echarts实例 information gainData();//获取数据源 operationEcharts();//运行echarts trclick();//点击table的数据时右边进行标亮 interleavecolor();//隔行变色 function gainData() {//将table中的数据赋给information var td = info.getElementsByTagName("td"); for(var i = 0;i<td.length - 1;i++,i++){ var x = td[i].innerText*1; // x轴 var y = td[i+1].innerText*1;// y轴 information.push([// 获取所有散点数据 x, y ]); } } //画echarts function operationEcharts(){ var option = { title: { text: \'table与ECharts交互模式\' }, tooltip: { padding: 10, backgroundColor: \'#222\', borderColor: \'#777\', borderWidth: 1, formatter: function (param) { // return \'<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">\' // + \'table与ECharts交互模式\' // + \'</div>\' // + \'日期：\' + param.data[0] // + "<div></div>" // + \'产量：\' + param.data[1]; console.log(param); } }, legend: { }, xAxis: { splitLine: {show: false}, axisLine: { lineStyle : { color: { type: \'linear\', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: \'red\' // 0% 处的颜色 }, { offset: 1, color: \'blue\' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, width: 2, } }, }, yAxis: { splitLine: {show: true}, }, series: [{ name: \'销量\', type: \'scatter\', data: information, }, { name: \'CHOSE\', type: \'effectScatter\', coordinateSystem: \'cartesian2d\', data: choseData(), symbolSize: 12, showEffectOn: \'render\', rippleEffect: { brushType: \'stroke\' }, hoverAnimation: true, itemStyle: { normal: { shadowBlur: 10, shadowColor: \'rgba(25, 100, 150, 0.5)\', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: \'#FF4500\' }, { offset: 1, color: \'#FFFF00\' }]) } }, zlevel: 1, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: \'top\', textStyle: { color : \'#FF4500\' } } } } ] }; myChart.setOption(option); } //标亮数据 function choseData(){ var chose = []; if(null==chosex||null==chosey){ chosex = 1; chosey = 100; } chose.push([chosex,chosey]); return chose; } function trclick() { for (var i = 1; i < tr.length; i++) { tr[i].onclick = function clicktr() { interleavecolor(); //重新加载一次隔行变色 this.style.background = "#FFFF00"; //被点击的变为黄色 var td = this.getElementsByTagName("td"); chosex = td[0].innerText*1; chosey = td[1].innerText*1; operationEcharts(); //重新运行Echarts } } } //隔行变色 function interleavecolor(){ for (j = 1; j < tr.length; j++) { if(0 != j%2){ tr[j].style.background = "#F0FFF0"; }else{ tr[j].style.background = "#FFFAFA"; } } } //如果点击echarts图 myChart.on(\'click\', function (params) { if(params.componentType == \'series\') { for (var k = 1; k < tr.length; k++) { var tablex = String(tr[k].children[0].innerHTML); // 表格中的x轴 var tabley = String(tr[k].children[1].innerHTML); // 表格中的y轴 var chartx = String(params.data[0]);// 散点中的x轴 var charty = String(params.data[1]);// 散点中的y轴 if(tablex == chartx && tabley == charty) { interleavecolor(); // 控制页面滚动到指定位置 tr[k].scrollIntoView(); tr[k].style.background = "#FFFF00"; // 对应行变为黄色 chosex = params.data[0]; chosey = params.data[1]; operationEcharts();//重新加载echarts视图 trclick(); break; } } } }); </script> </body> </html>
版权声明：本文为520520520zl原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。