JSP gets data. JSP gets back-end data directly. Gets the selected value of input. Radio. No checked attribute.

let str0='${showList}';
let str1=${showList};

Then you can convert it through JSON.parse()

Get the value selected by input

 //goodsType by category goods by item
var oneType= $("input[ name='criteria1' ] ").val();
//count by quantity totalprice by cost
var twoType = $("input[ name='criteria2' ] ").val();

What is obtained is the value in the red box below

<script language="javascript">

function querytr(){
var startDate = document.getElementById("startDate");
var endDate = document.getElementById("endDate");
if(startDate.value != "" & amp; & amp; endDate.value!= "" & amp; & amp; (startDate.value > endDate.value)){
parent.win.generalAlert("Start date cannot be greater than end date");
return false;
}
document.all.query.click();
}
function exptr(){
var startDate = document.getElementById("startDate");
var endDate = document.getElementById("endDate");
if(startDate.value != "" & amp; & amp; endDate.value!= "" & amp; & amp; (startDate.value > endDate.value)){
parent.win.generalAlert("Start date cannot be greater than end date");
return false;
}
document.all.exp.click();
}

// function fc(startDate,endDate){
// Ext.Ajax.request({
// method: 'POST',
// url: 'servlet/wareStockOutCountAnalyseChartServlet',
// params:{startDate:startDate,endDate:endDate},
// success: function(request){
    // if(request.responseText != ""){
    // var data = request.responseText;
    // chart(data);
    // }
   // }
// });
// }

// function chart(data){
// if(document.forms[0].criteria1.value== "" || document.forms[0].criteria1.value== "goods"){
// var chart = new FusionCharts('js/fc/Bar2D.swf?ChartNoDataText=No data', "ChartId", "1000", "400");
// }else if(document.forms[0].criteria2.value== ""){
// var chart = new FusionCharts('js/fc/Bar2D.swf?ChartNoDataText=No data', "ChartId", "1000", "400");
// }else if(document.forms[0].criteria2.value== "count"){
// var chart = new FusionCharts('js/fc/Bar2D.swf?ChartNoDataText=No data', "ChartId", "1000", "400");
// }else{
// var chart = new FusionCharts('js/fc/Pie2D.swf?ChartNoDataText=No data', "ChartId", "1000", "400");
// }
//
// chart.addParam("wmode","Opaque");
// chart.setDataXML(data);
// chart.render('Chart');
// }

function fcPicture(){
let title = "";
let dataY = [];
let dataX = [];
let str0='${showList}';
let showList = str0.replace(/[\]/g,'/');
// console.log(showList ,"Statistics on outbound shipments");
//goodsType by category goods by item
var oneType= $("input[ name='criteria1' ] ").val();
//count by quantity totalprice by cost
var twoType = $("input[ name='criteria2' ] ").val();
if(oneType === "goodsType"){
//By category + By quantity;
title = "Statistics on outbound quantities of goods by category (top ten)";
let arr = JSON.parse(showList)
if(twoType === "count"){
arr.forEach((item,index)=>{
dataY.push(item[2]);
dataX.push(item[3])
})
}else{
//By category + By cost ---- Pie chart
bingPicture();
return
}

}else{
// By item + By quantity;
title = "Statistics on the quantity of goods shipped out of the warehouse (top ten)";
let arr = JSON.parse(showList)
if(twoType === "count"){
arr.forEach((item,index)=>{
dataY.push(item[2]);
dataX.push(item[7])
})
}else{
//By item + By cost
title = "Statistics on goods delivery costs (top ten)";
arr.forEach((item,index)=>{
dataY.push(item[2]);
dataX.push(item[9])
})
}
}
// console.log(oneType,twoType,"111111111111111111")
let chartDom = document.getElementById('Chart');
let myChart = echarts.init(chartDom);
let option = {
backgroundColor: 'white',
title: {
text: title,
left: 'center',
top: "20",
// padding: [10, 0, 0, 50],
textStyle: {
color: "#000",
fontFamily: "Alibaba PuHuiTi",
fontSize: 14,
fontWeight: 600,
// padding: [0, 0, 0, 35]
},
},
tooltip: { show: false },
grid: { left: 10, top: 50, bottom: 20, right: 80, containLabel: true },
xAxis: {
type: 'value',
boundaryGap: false,
// max: 20, // Math.ceil(max / 4) * 5 || 10
axisLine: { show: true, lineStyle: { color: '#ccc' } },
axisTick: { show: false },
axisLabel: { color: '#999' },
splitLine: { lineStyle: { color: ['#CEEDFF'], type: [5, 8], dashOffset: 3 } },
min:0,
max:dataX.length === 0 ? 1000 :null
},
yAxis: {
type: 'category',
data: dataY,
axisLine: { show: true, lineStyle: { color: '#ccc' } },
axisTick: {length: 3},
axisLabel: { fontSize: 14, color: '#666', margin: 16, padding: 0 },
inverse: true,
},
series: [
{
name: 'Quantity',
type: 'bar',

itemStyle: {
color: '#52A8FF',
color: function (params) {
//Define a color collection
let colorList = [
'#52A8FF',
'#00B389',
'#FFA940',
'#FF5A57',
'#29EFC4',
'#F8AEA4',
'#FFC53D',
'#009982',
'#C099FC',
'#F5855F',
'#52A8FF',
'#00B389',
'#FFA940',
'#FF5A57',
'#29EFC4',
'#F8AEA4',
'#FFC53D',
'#009982',
'#C099FC',
'#F5855F',
];
// Display a color for each bar
return colorList[params.dataIndex];
},
},
barMaxWidth: 20,
label: { show: true, position: 'right', offset: [0, 2], fontSize: 16 },
data: dataX,
},
],
};
option & amp; & amp; myChart.setOption(option);
}

function bingPicture(){
let str0='${showList}';
let showList = str0.replace(/[\]/g,'/');;
// console.log(showList ,"By category + By cost");
let arr0 = JSON.parse(showList);
let arr=[];
let total =0;
arr0.forEach((item,index)=>{
let obj={};
// console.log(item,"888888888888")
obj.name= item[2];
obj.value = item[4];
arr.push(obj);
total + =item[4]
})
// console.log(arr,"777777777777777777777")
let title="Statistics of goods classification out-of-warehouse costs (total:" + total.toFixed(2) + "yuan)";
// let title="Statistics on outbound costs of goods classification";
// let color = ['#ffc140', '#d151d8', 'red'];
let option = {
backgroundColor: 'white',
// color: color,
grid: {
left: '5%',
right: '5%',
top: '20%',
containLabel: true,
},
title: {
text: title,
show: true, // Whether to display the title, default true.
padding: [10, 0, 15, 0],
textStyle: {
color: "#23527c",
fontSize: 14,
fontFamily: "Alibaba PuHuiTi",
fontWeight: 600,
},
left: 'center',
},
tooltip: {
show: true,
trigger: 'item',
//{a}(series name),{b}(data item name),{c}(value),{d}(percentage)
formatter: "{b} : {c} ({d}%)",
backgroundColor: "rgba(1, 13, 19, 0.5)",
borderWidth: 0,
textStyle: {
color: "rgba(212, 232, 254, 1)",
// fontSize: fontChart(0.24),
},
// extraCssText: "z-index:2"
},


series: [
{
// name: 'Access From',
type: 'pie',
radius: '50%',
center: ['50%', '60%'],
data: arr,

label: {
padding: [
15,
0,
0,
0
],
color: "#4E5969",
fontSize: 14,
formatter: "{b|{b}}: {d|{c}} yuan\
",
rich: {
b: {
fontSize: 14,
color: "#4E5969"
},
d: {
fontSize: 14,
fontWeight: 500,
// fontFamily: "DINAlternate-Bold, DINAlternate",
color: "#4E5969"
}
}
},

emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},

}
}
]
};
let chartDom = document.getElementById('Chart');
let myChart = echarts.init(chartDom);
option & amp; & amp; myChart.setOption(option);
}

function setCriteria(criteria,radioObj){
if("goodsType" == criteria || "goods" == criteria){
document.forms[0].criteria1.value = criteria;
}else{
document.forms[0].criteria2.value = criteria;
}
var arr = document.getElementsByName(radioObj.name);
for(var i = 0;i<arr.length;i + + ){
arr[i].value = "0";
}
radioObj.value = "1";
}

function initRadio(){
if(document.forms[0].criteria1.value == 'goodsType'){
document.getElementById('radio1').checked = "checked";
}
if(document.forms[0].criteria1.value == 'goods'){
document.getElementById('radio2').checked = "checked";
}
if(document.forms[0].criteria2.value == 'count'){
document.getElementById('radio3').checked = "checked";
}
if(document.forms[0].criteria2.value == 'totalprice'){
document.getElementById('radio4').checked = "checked";
}
//fc()
fcPicture()
}

</script>
<style>
#Chart{
width: 100%;
height: 500px;
}
</style>

</head>

<body
onload="initRadio();">
<div class="container-fluid">
<span class="container-title"><span id="title">Your current location: Query statistics &gt
Outbound situation analysis</span> </span>
<div class="continer-box">
<div class="innerpage">
<html:form action="wareStockOutCountAnalyse.do"
enctype="multipart/form-data">
<html:submit property="query" value="query" style="display:none" />
<html:submit property="exp" value="exp" style="display:none" />
<html:hidden property="criteria1" />
<html:hidden property="criteria2" />
<html:hidden property="pageType" />
<div class="search-box">
<span class="search-title">Query conditions
<a href="javascript:void(0);" class="close-up"></a>
</span>
<div class="seach-text clearfix">
<div class="box clearfix">
<span>Conditions:</span>
<div class="form-r">
<input type="radio" id="radio1" name="groupName1" value="0"
onclick="setCriteria('goodsType',this)" />
by category
<input type="radio" id="radio2" name="groupName1" value="1"
onclick="setCriteria('goods',this)" />
By item
</div>
</div>

<div class="box clearfix">
<span>Conditions:</span>
<div class="form-r">
<input type="radio" id="radio3" name="groupName2" value="1"
onclick="setCriteria('count',this)" />
by quantity
<input type="radio" id="radio4" name="groupName2" value="0"
onclick="setCriteria('totalprice',this)" />
by cost
</div>
</div>
<div class="box box-time clearfix">
<span>Departure date:</span>
<div class="form-r">
<div class="time-q">
<div class="form-group">
<div class="input-group date form_date" data-date=""
data-date-format="" data-link-field="dtp_input2"
data-link-format="yyyy-mm-dd">
<html:text property="startDate" styleId="startDate" styleClass="form-control"
readonly="true" />
<span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"> <img
src="img_new/3-12_03.png"> </span> </span>
</div>
</div>
</div>
<span>~</span>
<div class="time-h">
<div class="form-group">
<div class="input-group date form_date" data-date=""
data-date-format="" data-link-field="dtp_input2"
data-link-format="yyyy-mm-dd">
<html:text property="endDate" styleId="endDate" styleClass="form-control"
readonly="true" />
<span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"> <img
src="img_new/3-12_03.png"> </span> </span>
</div>
</div>
</div>
</div>
</div>
<div class="box clearfix">
<span>Department:</span>
<div class="form-r">
<html:select property="depId" styleClass="selectpicker">
<logic:notEmpty name="depms">
<html:options collection="depms" property="id"
labelProperty="name" />
</logic:notEmpty>
</html:select>
</div>
</div>
<div class="btn-right">
<a class="btn btn-seach" href="#n" onClick="querytr();">Query</a>
</div>
</div>
</div>

<div id='Chart' align="center">
</div>
<div class="result-table">
<span class="table-title"><i>Analysis of outbound shipments</i>
<div class="btn-right">
<a class="btn btn-grey" href="#n" onClick="exptr();">Export</a>
</div>
</span>
<div class="table-box">
<table width="100%" class="dg" border="0">
<col class="dgl"></col>
<c:choose>
<c:when test="${fn:length(wareStockInList[0]) == 10}">
<tr class="dgh">
<th>
Item code
</th>
<th>
\t\t\t\t\t\t\t\t\t\t\t\t\tproduct name
</th>
<th>
Specifications and models
</th>
<th>
\t\t\t\t\t\t\t\t\t\t\t\t\tcolor
</th>
<th>
\t\t\t\t\t\t\t\t\t\t\t\t\tcapacity
</th>
<th>
\t\t\t\t\t\t\t\t\t\t\t\t\tbrand
</th>
<th>
Total quantity shipped out of warehouse
</th>
<th>
unit
</th>
<th>
Total delivery price (yuan)
</th>
</tr>
<logic:notEmpty name="wareStockInList">
<logic:iterate id="wareStockIn" name="wareStockInList"
indexId="rowID">
<tr>
<td class="companyname">
${wareStockIn[1]}
</td>
<td class="companyname">
${wareStockIn[2]}
</td>
<td class="companyname">
${wareStockIn[3]}
</td>
<td class="companyname">
${wareStockIn[4]}
</td>
<td class="companyname">
${wareStockIn[5]}
</td>
<td class="companyname">
${wareStockIn[6]}
</td>
<td class=jine>
${wareStockIn[7]}
</td>
<td class="companyname">
${wareStockIn[8]}
</td>
<td class="jine">
<fmt:formatNumber pattern="#,##0.00">${wareStockIn[9]}</fmt:formatNumber>
</td>
</tr>
</logic:iterate>
</logic:notEmpty>
</c:when>
<c:otherwise>
<tr class="dgh">
<th>
Classification number
</th>
<th>
\t\t\t\t\t\t\t\t\t\t\t\t\tCategory Name
</th>
<th>
Total quantity shipped out of warehouse
</th>
<th>
Total delivery price (yuan)
</th>
</tr>
<logic:notEmpty name="wareStockInList">
<logic:iterate id="wareStockIn" name="wareStockInList"
indexId="rowID">
<tr>
<td class="companyname">
${wareStockIn[1]}
</td>
<td class="companyname">
${wareStockIn[2]}
</td>
<td class="jine"">
${wareStockIn[3]}
</td>
<td class="jine">
<fmt:formatNumber pattern="#,##0.00">${wareStockIn[4]}</fmt:formatNumber>
</td>
</tr>
</logic:iterate>
</logic:notEmpty>
</c:otherwise>
</c:choose>
<logic:empty name="wareStockInList">
<tr>
<td style="padding: 0 5 0 5;" colspan="11" align="center">
\t\t\t\t\t\t\t\t\t\t\t\tno record!
</td>
</tr>
</logic:empty>

</table>
</div>
</div>
<logic:notEmpty name="wareStockInList">
<c:if test="${results_size!=0 & amp; & amp; !(wareStockOutCountAnalyseForm.criteria1 eq 'goodsType')}">
<c:set var="form">wareStockOutCountAnalyseForm</c:set>
<%@ include file="/common/page.jsp"%>
</c:if>
</logic:notEmpty>
</html:form>
</div>
</div>
</div>
<script type="text/javascript">
$('.form_date').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
</script>
</body>
</html>

The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. MySQL entry-level skills treeHomepageOverview 76903 people are learning the system