图图联动
示意图：
代码：
<%@页language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" 进="java。sql.*"%> <!DOCTYPE html> <html> <头> <元charset="utf-8"> <题>图图联动</title> </头> <体style="高度：100%；边缘:0"> <表> <表align="中心"> <tr> <%串限制= ""; 串limit2 = "";%> <td> 单位名: <input type="text" name="限制" value="<%=限制%>"> </td> <td> 需求名:<input type="text" name="limit2" value="<%=limit2%>"> <input type="submit" name="submit" id="submit" value="查"> </td> </tr> <表> </形式> <form name="form1" id="form1" action=""> <表align="中心" border="1" width="900" name="table1" id="table1"> <tbody id="表"> <tr> <td>需求编号</td> <td>单位名称</td> <td>需求名称</td> <!-- <td>需求状态</td>--> <td>状态</td> </tr> <jsp：useBean id="db" 类="DBBean.豆" 范围="网页"/> <% 串Inamenum = ""; 串妇女研究所 = ""; 串Ixqname = ""; 串Iresult = ""; 串sql=""; 串sql2=""; 串tijiao=""; 串baocun=""; 串xingshi1=""; 串xingshi2=""; 串jishu1=""; 串jishu2=""; 串了 =请求。getParameter("限制"); 串order2 =请求。getParameter("limit2"); //String妇女研究所=届会议。getAttribute("妇女研究所").toString(); // 系统。出。释放("需求管理界面的："+妇女研究所); if(!"".等(order2)&&!"".等(顺序)){ sql="select Inamenum,妇女研究所,Ixqname,Iresult从xuqiu在那里妇女研究所喜欢的"+"'%"+了+"%'" +"和Ixqname像"+"'%"+order2+"%'"; sql2="select count(情况下，当iresult='已提交'然后1端)作为已提交，数(情况下，当iresult='已保存'然后1端)作为已保存，数(情况下，当iresult='形式审核未通过'然后1端)作为形式审核未通过，数(情况下，当iresult='形式审核通过'然后1端)作为形式审核通过，数(情况下，当iresult='技术审核未通过'然后1端)作为技术审核未通过，数(情况下，当iresult='技术审核通过'然后1端) 作为技术审核通过从xuqiu在那里妇女研究所喜欢的"+"'%"+了+"%'" +"和Ixqname像"+"'%"+order2+"%'"; }else if ("".等(order2)&&!"".等(顺序)){ sql="select Inamenum,妇女研究所,Ixqname,Iresult从xuqiu在那里妇女研究所喜欢的"+"'%"+了+"%'"; sql2="select count(情况下，当iresult='已提交'然后1端)作为已提交，数(情况下，当iresult='已保存'然后1端)作为已保存，数(情况下，当iresult='形式审核未通过'然后1端)作为形式审核未通过，数(情况下，当iresult='形式审核通过'然后1端)作为形式审核通过，数(情况下，当iresult='技术审核未通过'然后1端)作为技术审核未通过，数(情况下，当iresult='技术审核通过'然后1端) 作为技术审核通过从xuqiu在那里妇女研究所喜欢的"+"'%"+了+"%'"; }else if ("".等(顺序)&&!"".等(order2)) { sql="select Inamenum,妇女研究所,Ixqname,Iresult从xuqiu在Ixqname像"+"'%"+order2+"%'"; sql2="select count(情况下，当iresult='已提交'然后1端)作为已提交，数(情况下，当iresult='已保存'然后1端)作为已保存，数(情况下，当iresult='形式审核未通过'然后1端)作为形式审核未通过，数(情况下，当iresult='形式审核通过'然后1端)作为形式审核通过，数(情况下，当iresult='技术审核未通过'然后1端)作为技术审核未通过，数(情况下，当iresult='技术审核通过'然后1端) 作为技术审核通过从xuqiu在Ixqname像"+"'%"+order2+"%'"; } 别 {sql="select Inamenum,妇女研究所,Ixqname,Iresult从xuqiu "; sql2="select count(情况下，当iresult='已提交'然后1端)作为已提交，数(情况下，当iresult='已保存'然后1端)作为已保存，数(情况下，当iresult='形式审核未通过'然后1端)作为形式审核未通过，数(情况下，当iresult='形式审核通过'然后1端)作为形式审核通过，数(情况下，当iresult='技术审核未通过'然后1端)作为技术审核未通过，数(情况下，当iresult='技术审核通过'然后1端) 作为技术审核通过从xuqiu"; } // sql2="select count(情况下，当iresult='已提交'然后1端)作为已提交，数(情况下，当iresult='已保存'然后1端)作为已保存，数(情况下，当iresult='形式审核未通过'然后1端)作为形式审核未通过，数(情况下，当iresult='形式审核通过'然后1端)作为形式审核通过，数(情况下，当iresult='技术审核未通过'然后1端)作为技术审核未通过, 计数(情况下，当iresult='技术审核通过'然后1端)作为技术审核通过从xuqiu"; 结果da=db。executeQuery(sql2); 同时 (da。下一个()){ //系统。出。释放(rs。形式(1)); //可以输出Inamenum的所有值比如Iname为图书馆那么输出图书馆1图书馆2图书馆3 tijiao=da。形式(1); baocun=da。形式(2); xingshi1=da。形式(3); xingshi2=da。形式(4); jishu1=da。形式(5); jishu2=da。形式(6); } 结果rs =db。executeQuery(sql); 同时 (rs。下一个()){ //系统。出。释放(rs。形式(1)); //可以输出Inamenum的所有值比如Iname为图书馆那么输出图书馆1图书馆2图书馆3 Inamenum=rs。形式(1); 妇女研究所 =rs。形式(2); Ixqname =rs。形式(3); Iresult=rs。形式(4); 出来.释放("<tr><td>" +Inamenum+ "</td><td>" +妇女研究所+ "</td><td>" +Ixqname + "</td><td>" +Iresult+ "</td></tr>"); } %> </tbody> <表> </形式> <!-- 为ECharts准备一个具备大小（宽高）的Dom--> <div> <!-- 饼状图Dom--> <div id="main1" style="宽:500像素；高：500像素;浮：左"></div> <!-- 柱状图Dom--> <div id="main2" style="宽:500像素；高：420px;浮动：正确的"></div> </div> <!-- 。Echarts.js --> <脚本type="text/javascript" src="keshihua/bingtu/echarts.min.js"></脚本> <脚本type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></脚本> <脚本type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></脚本> <脚本type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></脚本> <脚本type="text/javascript" src="keshihua/bingtu/china.js"></脚本> <脚本type="text/javascript" src="keshihua/bingtu/world.js"></脚本> <脚本src="js/jquery-3.3.1.js"></脚本> <脚本type="text/javascript"> // 指定饼状图图表的配置项和数据 var 选项1={ // 图表标题 标题:{ 文本： '河北重大需求联动图', // 标题内容 x：'中心' // 居中显示 }, // 鼠标触发提示 提示:{ 触发： '的项目', 格式: "{个}br/>{b}:{c}({d}%)" // 展示格式 }, // 图 的传说:{ 东方： '的垂直', // 垂直显示 x： '左', // 显示位置--左上 数据：['已提交', '已保存', '形式审核未通过', '形式审核通过', '技术未审核通过', '技术审核通过'] }, 计算: true, 系列：[ { 名称：'访问来源', 类型：'馅饼', 半径： '55%', 中心：['50%', 225], 数据：[ {值： <%=tijiao%>，名称为： '已提交'}, {值： <%=baocun%>，名称为： '已保存'}, {值： <%=xingshi1%>，名称为： '形式审核未通过'}, {值： <%=xingshi2%>，名称为： '形式审核通过'}, {值： <%=jishu1%>，名称为： '技术未审核通过'}, {值： <%=jishu2%>，名称为： '技术审核通过'} ] } ] }; // 指定柱状图图表的配置项和数据 var option2={ 提示:{ 触发： '轴', axisPointer:{ // 指示器类型，shadow为阴影指示器 类型： '阴影' } }, 传说:{ 数据：['已提交', '已保存', '形式审核未通过', '形式审核通过', '技术未审核通过', '技术审核通过'] }, // 工具栏组件 工具箱:{ 显示： 真正的, 东方： '的垂直', 上： '中心', 功能：{ 标记：{显示： 真}, // 启用的动态类型，包括'line'（切换为折线图）,'bar'（切换为柱状图）,'叠（切换为堆叠模式）,'瓷砖'（切换为平铺模式） magicType:{显示： 真正的,type:['线', 'bar', '堆', '瓷砖']}, 恢复:{显示： 真}, // 是否支持配置项还原 saveAsImage:{显示： 真} // 保存图片 } }, 计算: true, x轴:[ { 类型： '类别', 数据：['已提交', '已保存', '形式审核未通过', '形式审核通过', '技术未审核通过', '技术审核通过'] } ], y轴:[ { 类型： 'value', splitArea:{显示： 真} } ], 格:{ x2：40 }, 系列：[ { 名称：'直接访问', 类型：'bar', 栈： '液', 数据：[<%=tijiao%>,<%=baocun%>,<%=xingshi1%>,<%=xingshi2%>,<%=jishu1%>,<%=jishu2%>] } ] }; // 对饼状图dom，初始化echarts实例 var myChart1=类型.初始化(文件。getElementById('main1')); myChart1.setOption(选项1); //按option1展示myChart1图表 // 对柱状图dom，初始化echarts实例 var myChart2=类型.初始化(文件。getElementById('main2')); myChart2.setOption(选项2); // 将myChart1和myChart2关联起来 类型.connect([myChart1,myChart2]) // 配置自动适应Windows窗口大小 目(功能(){ 窗口。onresize = 功能(){ myChart.调整(); myChart2.调整(); } },200) </脚本> </体> </html>