html
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">村/社区</label>
<div class="layui-input-inline">
<select name="village" id="village" lay-filter="village">
<option value="">请选择村/社区</option>
</select>
</div>
<label class="layui-form-label">网格：</label>
<div class="layui-input-inline">
<select name="gridding" id="gridding" lay-filter="gridding">
<option value="">请选择网格</option>
</select>
</div>
<button class="layui-btn layui-btn-normal" id="statistics" lay-submit lay-filter="statistics">统计</button>
</div>
</div>
<div id="hometwo" style="width: 100%; height: 400px"></div>
</div>
初始化渲染ECharts表格
function gridpeople(village) {
$.ajax($url+'/jxkh/S0008F0006_3', {
data: {
csq: village
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
async: true,
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
let gridpeopledata = data.data;
$(".gridpeopledatatime").text(gridpeopledata.beginTime + " 至 " + gridpeopledata.endTime);
let gridpeoplename = gridpeopledata.xAxis;
let gridpeoplenum = gridpeopledata.series[0].data;
let myCharttwo = echarts.init(document.getElementById('hometwo'));
let optiontwo = {
title: {
text: ''
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c}"
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
data: ['处理案件']
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: gridpeoplename
},
dataZoom: [{
type: 'slider',
xAxisIndex: 0,
filterMode: 'empty'
},
{
type: 'slider',
yAxisIndex: 0,
filterMode: 'empty'
}
],
series: [{
name: '处理案件',
type: 'bar',
data: gridpeoplenum,
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83','#ca8622','#bda29a', '#6e7074','#546570','#c4ccd3'
];
return colorList[params.dataIndex]
},
}
},
}],
};
myCharttwo.setOption(optiontwo);
},
error: function(xhr, type, errorThrown) {
}
});
}
一级下拉先赋值
//网格员排名统计下拉赋值
function selectone() {
$.ajax({
url: $url+'/jxkh/S0008F0006_1',
dataType: 'json',
type: 'post',
success: function(data) {
$("#village").empty();
if (data.result == 200) {
$("#village").append(new Option("请选择村/社区", ""));
$.each(data.data, function(index, item) {
$('#village').append(new Option(item));
});
} else {
$("#village").append(new Option("暂无数据", ""));
}
layui.form.render("select");
}
})
}
二级下拉框赋值并提交再次渲染表格
form.on('select(village)', function(data) {
var seone = data.value;
$.ajax({
url: $url+"/jxkh/S0008F0006_2",
type: "post",
dataType: "json",
data: {
csq: seone
},
success: function(data) {
if (data.result == 200) {
$("#gridding").empty();
$("#gridding").append(new Option("请选择网格", ""));
$.each(data.data, function(index, item) {
$('#gridding').append(new Option(item));
});
} else {
$("#gridding").append(new Option("暂无数据", ""));
}
layui.form.render("select");
}
})
})
form.on('submit(statistics)', function(data){
var village = data.field.village;
var gridding = data.field.gridding;
$.ajax($url+'/jxkh/S0008F0006_3', {
data: {
csq: village,
wg:gridding
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
async: true,
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
let gridpeopledata = data.data;
console.log(gridpeopledata);
$(".gridpeopledatatime").text(gridpeopledata.beginTime + " 至 " + gridpeopledata.endTime);
let gridpeoplename = gridpeopledata.xAxis;
let gridpeoplenum = gridpeopledata.series[0].data;
let myCharttwo = echarts.init(document.getElementById('hometwo'));
let optiontwo = {
title: {
text: ''
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c}"
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
data: ['处理案件']
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: gridpeoplename
},
dataZoom: [{
type: 'slider',
xAxisIndex: 0,
filterMode: 'empty'
},
{
type: 'slider',
yAxisIndex: 0,
filterMode: 'empty'
}
],
series: [{
name: '处理案件',
type: 'bar',
data: gridpeoplenum,
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074',
'#546570',
'#c4ccd3'
];
return colorList[params.dataIndex]
},
}
},
}],
};
myCharttwo.setOption(optiontwo);
},
error: function(xhr, type, errorThrown) {
}
});
return false;
});
