<%@ 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; 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=" 500px;height:500px;"></div> <!-- 柱状图Dom --> <div id="main2" style=" 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=" 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=" 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 }, 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>