617 lines
18 KiB
Plaintext
617 lines
18 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InOutRecordChart.aspx.cs" Inherits="FineUIPro.Web.Door.InOutRecordChart" %>
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head runat="server">
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<title></title>
|
|||
|
|
<link href="../res/index/css/reset.css" rel="stylesheet" />
|
|||
|
|
<link href="../res/index/css/home.css" rel="stylesheet" />
|
|||
|
|
<link href="../res/index/css/swiper-3.4.2.min.css" rel="stylesheet" />
|
|||
|
|
<style type="text/css">
|
|||
|
|
* {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flexV {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wrap {
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-wrap {
|
|||
|
|
padding: 0;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-wrap:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bw-item-content {
|
|||
|
|
padding: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top {
|
|||
|
|
display: flex;
|
|||
|
|
display: -webkit-flex;
|
|||
|
|
overflow: hidden;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bw-b-bottom {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.itemlr {
|
|||
|
|
margin: 0 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bw-b-bottom-up {
|
|||
|
|
border-radius: 0;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info {
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
color: red;
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info .tit {
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info .tel {
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-wrap {
|
|||
|
|
left: auto;
|
|||
|
|
right: 15px;
|
|||
|
|
top: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab .t-item {
|
|||
|
|
width: auto;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-list {
|
|||
|
|
height: 100px;
|
|||
|
|
padding: 15px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
color: #fff;
|
|||
|
|
margin: 0 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-list .bl-left {
|
|||
|
|
float: left;
|
|||
|
|
margin-right: 30px;
|
|||
|
|
margin-left: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-list .bl-right {
|
|||
|
|
float: right;
|
|||
|
|
margin-right: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab .t-item {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-body {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex: 3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-body .content-item {
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.part-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.part-tag {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background-color: #107ca2;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
flex: 1;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.part-tag + .part-tag {
|
|||
|
|
margin-left: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-top {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #fff;
|
|||
|
|
border-bottom: 1px solid #f2f2f2;
|
|||
|
|
padding: 10px 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unit {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
text-align: right;
|
|||
|
|
font-size: 16px;
|
|||
|
|
padding-right: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.num {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unit-btn {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 10px 0px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.do-btn {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
background-color: #107ca2;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
flex: 1;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px 0px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.base-wrap {
|
|||
|
|
padding: 15px 10px;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.base-wrap .base-tit {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.base-wrap .base-txt-wrap {
|
|||
|
|
margin-top: 5px;
|
|||
|
|
background-color: #0B508B;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
color: #FFAE72;
|
|||
|
|
height: 100%;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.base-wrap .base-txt-wrap .num-1 {
|
|||
|
|
background-color: #2A759C;
|
|||
|
|
padding: 5px;
|
|||
|
|
font-size: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info-1 {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info-1-list {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info-1 .telbg {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 85px;
|
|||
|
|
background: url(../res/index/images/tel.png) center center no-repeat;
|
|||
|
|
background-size: contain;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info-1-list-item {
|
|||
|
|
padding: 0 5px;
|
|||
|
|
background-color: #2A759C;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info-1-list-item:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info-1-list-item .telnum {
|
|||
|
|
text-align: center;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info-1-info {
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: #2A759C;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 16px;
|
|||
|
|
height: 40px;
|
|||
|
|
line-height: 40px;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="wrap flex flexV">
|
|||
|
|
<div class="bottom-wrap flex1">
|
|||
|
|
<div class="top">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up">
|
|||
|
|
<div class="tab-wrap">
|
|||
|
|
<div class="tab" data-value="4">
|
|||
|
|
<div class="t-item active">人员类型</div>
|
|||
|
|
<div class="spline"></div>
|
|||
|
|
<div class="t-item">专业</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bw-item-content">
|
|||
|
|
<div id='four' style="width: 100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script type="text/javascript" src="../res/index/js/jquery-3.4.1.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/index/js/swiper-3.4.2.jquery.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/index/js/echarts.min.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function category_Four(id, xArr, series) {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById(id))
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
// left:'center',
|
|||
|
|
text: '安全检查问题统计',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 12,
|
|||
|
|
fontWeight: '300',
|
|||
|
|
},
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
color: ['#88cc00', '#AE4B23'],
|
|||
|
|
legend: {
|
|||
|
|
left: '15%',
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {//图例文字的样式
|
|||
|
|
color: '#ffffff',
|
|||
|
|
fontSize: 10,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.3)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
interval: 0,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
type: 'category',
|
|||
|
|
data: xArr
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.3)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: series,
|
|||
|
|
grid: {
|
|||
|
|
top: '25%',
|
|||
|
|
left: '0%',
|
|||
|
|
right: '0%',
|
|||
|
|
bottom: '0%',
|
|||
|
|
containLabel: true,
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
// borderColor: 'rgba(0,162,233, 1)'
|
|||
|
|
},
|
|||
|
|
//itemStyle: {
|
|||
|
|
// color: 'rgba(200,201,10, 1)'
|
|||
|
|
//},
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.3)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
var four1 =<%=Four1 %>;
|
|||
|
|
var xArr = four1.categories
|
|||
|
|
var series = [{
|
|||
|
|
name: '1月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
barGap: 0.05,
|
|||
|
|
data: four1.series[0].data,
|
|||
|
|
itemStyle: { normal: { color: '#88cc00' } }
|
|||
|
|
}, {
|
|||
|
|
name: '2月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[1].data,
|
|||
|
|
itemStyle: { normal: { color: '#AE4B23' } }
|
|||
|
|
}, {
|
|||
|
|
name: '3月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[2].data,
|
|||
|
|
itemStyle: { normal: { color: '#F0F8FF' } }
|
|||
|
|
}, {
|
|||
|
|
name: '4月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[3].data,
|
|||
|
|
itemStyle: { normal: { color: '#FAEBD7' } }
|
|||
|
|
}, {
|
|||
|
|
name: '5月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[4].data,
|
|||
|
|
itemStyle: { normal: { color: '#00FFFF' } }
|
|||
|
|
}, {
|
|||
|
|
name: '6月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[5].data,
|
|||
|
|
itemStyle: { normal: { color: '#7FFFD4' } }
|
|||
|
|
}, {
|
|||
|
|
name: '7月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[6].data,
|
|||
|
|
itemStyle: { normal: { color: '#7FFF00' } }
|
|||
|
|
}, {
|
|||
|
|
name: '8月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[7].data,
|
|||
|
|
itemStyle: { normal: { color: '#6495ED' } }
|
|||
|
|
}, {
|
|||
|
|
name: '9月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[8].data,
|
|||
|
|
itemStyle: { normal: { color: '#FFF8DC' } }
|
|||
|
|
}, {
|
|||
|
|
name: '10月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[9].data,
|
|||
|
|
itemStyle: { normal: { color: '#00FFFF' } }
|
|||
|
|
}, {
|
|||
|
|
name: '11月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[10].data,
|
|||
|
|
itemStyle: { normal: { color: '#FF8C00' } }
|
|||
|
|
}, {
|
|||
|
|
name: '12月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[11].data,
|
|||
|
|
itemStyle: { normal: { color: '#9932CC' } }
|
|||
|
|
}];
|
|||
|
|
category_Four('four', xArr, series)
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
$(".tab .t-item").click(function () {
|
|||
|
|
var $this = $(this)
|
|||
|
|
var index = $this.index()
|
|||
|
|
if ($this.hasClass('active') && index == 0) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
var $tab = $this.closest(".tab")
|
|||
|
|
var value = $tab.attr("data-value")
|
|||
|
|
$tab.find(".t-item").removeClass('active');
|
|||
|
|
$this.addClass('active')
|
|||
|
|
|
|||
|
|
var four1 =<%=Four1 %>;
|
|||
|
|
var four2 =<%=Four2 %>;
|
|||
|
|
if (value == 4) {
|
|||
|
|
var xArr = four1.categories
|
|||
|
|
var data = [{
|
|||
|
|
name: '1月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
barGap: 0.05,
|
|||
|
|
data: four1.series[0].data,
|
|||
|
|
itemStyle: { normal: { color: '#88cc00' } }
|
|||
|
|
}, {
|
|||
|
|
name: '2月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[1].data,
|
|||
|
|
itemStyle: { normal: { color: '#AE4B23' } }
|
|||
|
|
}, {
|
|||
|
|
name: '3月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[2].data,
|
|||
|
|
itemStyle: { normal: { color: '#F0F8FF' } }
|
|||
|
|
}, {
|
|||
|
|
name: '4月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[3].data,
|
|||
|
|
itemStyle: { normal: { color: '#FAEBD7' } }
|
|||
|
|
}, {
|
|||
|
|
name: '5月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[4].data,
|
|||
|
|
itemStyle: { normal: { color: '#00FFFF' } }
|
|||
|
|
}, {
|
|||
|
|
name: '6月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[5].data,
|
|||
|
|
itemStyle: { normal: { color: '#7FFFD4' } }
|
|||
|
|
}, {
|
|||
|
|
name: '7月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[6].data,
|
|||
|
|
itemStyle: { normal: { color: '#7FFF00' } }
|
|||
|
|
}, {
|
|||
|
|
name: '8月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[7].data,
|
|||
|
|
itemStyle: { normal: { color: '#6495ED' } }
|
|||
|
|
}, {
|
|||
|
|
name: '9月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[8].data,
|
|||
|
|
itemStyle: { normal: { color: '#FFF8DC' } }
|
|||
|
|
}, {
|
|||
|
|
name: '10月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[9].data,
|
|||
|
|
itemStyle: { normal: { color: '#00FFFF' } }
|
|||
|
|
}, {
|
|||
|
|
name: '11月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[10].data,
|
|||
|
|
itemStyle: { normal: { color: '#FF8C00' } }
|
|||
|
|
}, {
|
|||
|
|
name: '12月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[11].data,
|
|||
|
|
itemStyle: { normal: { color: '#9932CC' } }
|
|||
|
|
}];
|
|||
|
|
if (index == 2) {
|
|||
|
|
var xArr = four2.categories
|
|||
|
|
var data = [{
|
|||
|
|
name: '1月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
barGap: 0.05,
|
|||
|
|
data: four2.series[0].data,
|
|||
|
|
itemStyle: { normal: { color: '#88cc00' } }
|
|||
|
|
}, {
|
|||
|
|
name: '2月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four2.series[1].data,
|
|||
|
|
itemStyle: { normal: { color: '#AE4B23' } }
|
|||
|
|
}, {
|
|||
|
|
name: '3月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four2.series[2].data,
|
|||
|
|
itemStyle: { normal: { color: '#F0F8FF' } }
|
|||
|
|
}, {
|
|||
|
|
name: '4月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four2.series[3].data,
|
|||
|
|
itemStyle: { normal: { color: '#FAEBD7' } }
|
|||
|
|
}, {
|
|||
|
|
name: '5月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four2.series[4].data,
|
|||
|
|
itemStyle: { normal: { color: '#00FFFF' } }
|
|||
|
|
}, {
|
|||
|
|
name: '6月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four2.series[5].data,
|
|||
|
|
itemStyle: { normal: { color: '#7FFFD4' } }
|
|||
|
|
}, {
|
|||
|
|
name: '7月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four2.series[6].data,
|
|||
|
|
itemStyle: { normal: { color: '#7FFF00' } }
|
|||
|
|
}, {
|
|||
|
|
name: '8月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four2.series[7].data,
|
|||
|
|
itemStyle: { normal: { color: '#6495ED' } }
|
|||
|
|
}, {
|
|||
|
|
name: '9月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four2.series[8].data,
|
|||
|
|
itemStyle: { normal: { color: '#FFF8DC' } }
|
|||
|
|
}, {
|
|||
|
|
name: '10月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four2.series[9].data,
|
|||
|
|
itemStyle: { normal: { color: '#00FFFF' } }
|
|||
|
|
}, {
|
|||
|
|
name: '11月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four2.series[10].data,
|
|||
|
|
itemStyle: { normal: { color: '#FF8C00' } }
|
|||
|
|
}, {
|
|||
|
|
name: '12月',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four2.series[11].data,
|
|||
|
|
itemStyle: { normal: { color: '#9932CC' } }
|
|||
|
|
}];
|
|||
|
|
}
|
|||
|
|
category_Four('four', xArr, data)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</html>
|