今天在昨天的基础上实现了两部分的图表联动，最后一个需求需要设置一些东西，将于明天完成图标联动功能。图标联动我的做法是首先点击表格中的数据来实现更新表中的数据，这种方法能实现简单的图标联动，但是我认为大数据的图标联动实现的时间就比较长了。
点击表格中的数量栏将相应图中的点高亮显示。
同样是点击数量栏 将对图中的相应板块进行显示。
源代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path=request.getContextPath(); %> <%@ page import="java.util.List"%> <%@ page import="com.bean.LetterBean"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>按年分析</title> <script type="text/javascript" src="<%=path %>/js/echarts.min.js"></script> <script type="text/javascript" src="<%=path %>/js/jquery-3.4.1.min.js"></script> <style type="text/css"> .table{ width:80%; } .table tr th{ font-family: FangSong,仿宋; } .table , .table tr td, .table tr th{ border:solid 1px #000000; border-collapse:collapse; } </style> </head> <body> <% List<LetterBean> list=(List<LetterBean>)request.getAttribute("alldata"); String year=(String)request.getAttribute("year"); String num=(String)request.getAttribute("num"); %> <div id="container" style="height: 490px;weight:100%;"></div> <div align="center"> <table class="table"> <tr id="year"> <th>年份</th> <% for(int i=0;i<list.size();i++){ out.print("<td>"+list.get(i).getCols()+"</td>"); } %> </tr> <tr id="values"> <th>数量</th> <% for(int i=0;i<list.size();i++){ out.print("<td>"+list.get(i).getValue()+"</td>"); } %> </tr> </table> </div> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; var year=<%=year%> var num=<%=num%> SetOption(year,num); $("tr#values td").click( function(){ var text=$(this).html(); var value=[]; <% for(int i=0;i<list.size();i++){ %> if(text==<%=list.get(i).getValue()%>){ var data1={} data1.value=<%=list.get(i).getValue()%> data1.itemStyle={} data1.itemStyle.color='blue' data1.symbolSize=10 value.push(data1) }else { var data1={} data1.value=<%=list.get(i).getValue()%> value.push(data1) } <% } %> //alert(JSON.stringify(value)) SetOption(year,value); }); function SetOption(year,num){ option = { xAxis: { type: 'category', //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] data: year }, yAxis: { type: 'value' }, series: [{ //data: [820, 932, 901, 934, 1290, 1330, 1320], data : num, type: 'line' }] }; if (option && typeof option === "object") { myChart.setOption(option, true); } } </script> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path=request.getContextPath(); %> <%@ page import="java.util.List"%> <%@ page import="com.bean.LetterBean"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>信件类型</title> <script type="text/javascript" src="<%=path %>/js/echarts.min.js"></script> <script type="text/javascript" src="<%=path %>/js/jquery-3.4.1.min.js"></script> <style type="text/css"> .table{ width:80%; } .table tr th{ font-family: FangSong,仿宋; } .table , .table tr td, .table tr th{ border:solid 1px #000000; border-collapse:collapse; } </style> </head> <body> <% List<LetterBean> list=(List<LetterBean>)request.getAttribute("alldata"); String item=(String)request.getAttribute("item"); String data=(String)request.getAttribute("data"); %> <div id="container" style="height: 490px;"></div> <div align="center"> <table class="table"> <tr id="type"> <th>类型</th> <% for(int i=0;i<list.size();i++){ out.print("<td>"+list.get(i).getCols()+"</td>"); } %> </tr> <tr id="values"> <th>数量</th> <% for(int i=0;i<list.size();i++){ out.print("<td>"+list.get(i).getValue()+"</td>"); } %> </tr> </table> </div> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; var item=<%=item%> var data=<%=data%> SetOption(item,data); $("tr#values td").click( function(){ var text=$(this).html(); var value=[]; <% for(int i=0;i<list.size();i++){ %> if(text==<%=list.get(i).getValue()%>){ var data1={} data1.value=<%=list.get(i).getValue()%> data1.name='<%=list.get(i).getCols()%>' data1.selected=true value.push(data1) }else { var data1={} data1.value=<%=list.get(i).getValue()%> data1.name='<%=list.get(i).getCols()%>' value.push(data1) } <% } %> //alert(JSON.stringify(value)) SetOption(item,value); }); function SetOption(item,data){ option = { title: { text: '北京百姓信件类型', subtext: 'By@陈欢', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', //data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] data: item }, series: [ { name: '信件类型', type: 'pie', radius: '55%', center: ['50%', '60%'], /* data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], */ data: data, emphasis: { itemStyle: { shadowBlur: 20, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; ; if (option && typeof option === "object") { myChart.setOption(option, true); } } </script> </body> </html>