信件分析实战（六）——图表联动续

　　今天在昨天的基础上实现了两部分的图表联动，最后一个需求需要设置一些东西，将于明天完成图标联动功能。图标联动我的做法是首先点击表格中的数据来实现更新表中的数据，这种方法能实现简单的图标联动，但是我认为大数据的图标联动实现的时间就比较长了。

　　点击表格中的数量栏将相应图中的点高亮显示。

同样是点击数量栏将对图中的相应板块进行显示。

源代码：

<%@ 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>

ByYear.jsp

<%@ 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>

ByType.jsp

信件分析实战（六）——图表联动续

猜你喜欢