1、效果
2、jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>案件推送列表</title>
<jsp:include page="/page/hcbh/api/module.jsp"></jsp:include>
<script type="text/javascript" src="<%=path %>/page/hcbh/api/taskpush/stats/echarts-5.3.1.js"></script>
<script type="text/javascript" src="<%=path %>/page/hcbh/api/taskpush/stats/zhzx.js"></script>
</head>
<body>
<%-- <div id="status" style="width: 600px;height:400px;"></div>--%>
<div id="zt" style="width: 600px;height:400px;"></div>
</body>
3、javascript
$(document).ready(function() {
stats_zt();
});
/**
* 按专题统计
*/
function stats_zt(){
var url = "/gds/query/list.do";
var data = {
"c":"stats_ztmc"
};
var res = ajaxData(url,data);
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('zt'));
if(res.length === 0){
//无数据展示
myChart.setOption({
title: {
text: '暂无数据',
x: 'center',
y: 'center',
textStyle: {
color: '#65ABE7',
fontWeight: 'normal',
fontSize: 16
}
}
});
}else{
var dataAxis = []; //X轴name
var dataYcz = []; //y轴-已处置
var dataWcz = [];//y轴-未处置
for (var i in res) {
dataAxis.push(res[i].ztmc);
dataYcz.push(res[i].ycz);
dataWcz.push(res[i].wcz)
}
//绘制图表
myChart.setOption({
title:{
text: '各专题处置情况统计',
textAlign:'center',
top:'4%',
left:'50%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
}
return relVal;
}
},
legend: {
top:'90%' //图例置底
},
grid: {
left: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisLabel: {//x轴文字的配置
show: true,
interval: 0,//使x轴文字显示全
},
data: dataAxis
}
],
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value}.0%'
},
show: true
}
],
series: [
{
name: '已处置',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
label:{
show:true,
formatter:function(params){
return params.value+'%';
}
},
data:dataYcz
},
{
name: '未处置',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
label:{
show:true,
color:'#fff',
formatter:function(params){
return params.value+'%';
}
},
itemStyle:{ //修改柱状图颜色
normal:{
color:'#E98344'
}
},
data: dataWcz
}
]
});
}
window.onresize = myChart.resize;
}
4、数据