277 lines
6.3 KiB
HTML
277 lines
6.3 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
|
|||
|
|
<title>ECharts</title>
|
|||
|
|
<!-- 引入 echarts.js -->
|
|||
|
|
<link rel="stylesheet" href="js/layui-v2.5.6/layui/css/layui.css" media="all">
|
|||
|
|
<script src="echarts/echarts.min.js" charset="utf-8"></script>
|
|||
|
|
<script src="js/layui-v2.5.6/layui/layui.all.js"></script>
|
|||
|
|
<style type="text/css">
|
|||
|
|
.clear_box::after {
|
|||
|
|
content: "";
|
|||
|
|
display: block;
|
|||
|
|
clear: both;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.div_float {
|
|||
|
|
width: 50%;
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-btn-primary {
|
|||
|
|
border: 1px solid #C9C9C9;
|
|||
|
|
background-color: #01b9dd !important;
|
|||
|
|
color: white !important;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="sjzs_top">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="sjzs_cont clear_box">
|
|||
|
|
<div class="div_float">
|
|||
|
|
<div id="main" style="width: 800px;height:400px;margin: 0 auto;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div_float">
|
|||
|
|
<div id="main1" style="width: 800px;height:400px;margin: 0 auto;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<table id="demo" class="layui-hide" lay-filter="xk"></table>
|
|||
|
|
|
|||
|
|
<script type="text/html" id="barDemo">
|
|||
|
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
layui.use('table', function() {
|
|||
|
|
var table = layui.table;
|
|||
|
|
table.render({
|
|||
|
|
elem: '#demo',
|
|||
|
|
// url: 'files/jclb.json' //数据接口[123, 265, 372, 274][84, 182, 213, 56]
|
|||
|
|
// ,
|
|||
|
|
"data": [{
|
|||
|
|
"a": "二屯镇",
|
|||
|
|
"b": "岗前培训",
|
|||
|
|
"c": "1372",
|
|||
|
|
"d": "320",
|
|||
|
|
"e": "2020-01-01到2020-05-01",
|
|||
|
|
"f": "1121"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"a": "黄河涯镇",
|
|||
|
|
"b": "基础课程",
|
|||
|
|
"c": "1765",
|
|||
|
|
"d": "250",
|
|||
|
|
"e": "2020-01-01到2020-05-01",
|
|||
|
|
"f": "1239"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"a": "赵虎镇",
|
|||
|
|
"b": "人事部门培训",
|
|||
|
|
"c": "1272",
|
|||
|
|
"d": "600",
|
|||
|
|
"e": "2020-01-01到2020-05-01",
|
|||
|
|
"f": "936"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"a": "抬头寺镇",
|
|||
|
|
"b": "技术部门培训",
|
|||
|
|
"c": "974",
|
|||
|
|
"d": "80",
|
|||
|
|
"e": "2020-01-01到2020-05-01",
|
|||
|
|
"f": "580"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"a": "袁桥镇",
|
|||
|
|
"b": "技术部门培训",
|
|||
|
|
"c": "700",
|
|||
|
|
"d": "80",
|
|||
|
|
"e": "2020-01-01到2020-05-01",
|
|||
|
|
"f": "600"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
cellMinWidth: 80 //全局定义常规单元格的最小宽度
|
|||
|
|
,
|
|||
|
|
page: true //开启分页
|
|||
|
|
,
|
|||
|
|
cols: [
|
|||
|
|
[ //表头
|
|||
|
|
{
|
|||
|
|
field: 'a',
|
|||
|
|
title: 'Top5 乡镇'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// {
|
|||
|
|
// field: 'b',
|
|||
|
|
// title: '培训项目'
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
field: 'c',
|
|||
|
|
title: '已完成培训人数'
|
|||
|
|
}, {
|
|||
|
|
field: 'd',
|
|||
|
|
title: '未完成培训人数'
|
|||
|
|
}, {
|
|||
|
|
field: 'e',
|
|||
|
|
title: '培训时间'
|
|||
|
|
}, {
|
|||
|
|
field: 'f',
|
|||
|
|
title: '通过培训人数'
|
|||
|
|
}, {
|
|||
|
|
fixed: 'right',
|
|||
|
|
title: '查看',
|
|||
|
|
width: 165,
|
|||
|
|
align: 'center',
|
|||
|
|
toolbar: '#barDemo'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
//监听行工具事件
|
|||
|
|
table.on('tool(xk)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
|
|||
|
|
var data = obj.data //获得当前行数据
|
|||
|
|
,
|
|||
|
|
layEvent = obj.event; //获得 lay-event 对应的值
|
|||
|
|
if (layEvent === 'detail') {
|
|||
|
|
layer.msg('查看详情');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
option = {
|
|||
|
|
title: {
|
|||
|
|
text: '乡镇培训况统计'
|
|||
|
|
},
|
|||
|
|
color: ['#003366', '#e5323e'],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['完成', '未完成']
|
|||
|
|
},
|
|||
|
|
toolbox: {
|
|||
|
|
show: false,
|
|||
|
|
orient: 'vertical',
|
|||
|
|
left: 'right',
|
|||
|
|
top: 'center',
|
|||
|
|
feature: {
|
|||
|
|
mark: {
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
dataView: {
|
|||
|
|
show: true,
|
|||
|
|
readOnly: false
|
|||
|
|
},
|
|||
|
|
magicType: {
|
|||
|
|
show: true,
|
|||
|
|
type: ['line', 'bar', 'stack', 'tiled']
|
|||
|
|
},
|
|||
|
|
restore: {
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
saveAsImage: {
|
|||
|
|
show: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: ['二屯镇', '黄河涯镇', '赵虎镇', '抬头寺镇', '袁桥镇']
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value'
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: '完成',
|
|||
|
|
type: 'bar',
|
|||
|
|
barGap: 0,
|
|||
|
|
barWidth: 35,
|
|||
|
|
data: [1372, 1765, 1272, 974, 700]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '未完成',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 35,
|
|||
|
|
data: [320, 250, 600, 80, 80]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
var myChart1 = echarts.init(document.getElementById('main1'));
|
|||
|
|
|
|||
|
|
|
|||
|
|
option1 = {
|
|||
|
|
title: {
|
|||
|
|
text: '乡镇完培训未通过数统计',
|
|||
|
|
subtext: '统计数据',
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
// orient: 'vertical',
|
|||
|
|
// top: 'middle',
|
|||
|
|
bottom: 10,
|
|||
|
|
left: 'center',
|
|||
|
|
data: ['二屯镇', '黄河涯镇', '赵虎镇', '抬头寺镇', '袁桥镇']
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '65%',
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
selectedMode: 'single',
|
|||
|
|
data: [{
|
|||
|
|
name: '二屯镇',
|
|||
|
|
value: 320
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 250,
|
|||
|
|
name: '黄河涯镇'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 600,
|
|||
|
|
name: '赵虎镇'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 80,
|
|||
|
|
name: '抬头寺镇'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 80,
|
|||
|
|
name: '袁桥镇'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
myChart1.setOption(option1);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|