linan
/
dgs.bigScreen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113
							<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>繁殖综合分析</title>
  <link href="css/common.css" rel="stylesheet">
  <link href="css/fzfx.css" rel="stylesheet">
  <link href="css/scrollBar.css" rel="stylesheet">
  <script type="text/javascript" src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
</head>
<body>
	<div class="header-wrapper">
	  <div class="title">
	  智能化综合管理平台
	  <svg version="1.1" width="900" height='100'>
	   <polygon points="0,0 75,100 114,100 135,82 765,82 786,100 825,100 900,0" style="fill:transparent;stroke:#69F8FE;stroke-width:2"/>
		</svg>
	  </div>
	  <div class="nav-bar">
		<a class="item " href="index.html">首页</a>
		<a class="item active" href="fzfx.html">生产管理</a>
		<a class="item" href="swfk.html">生物防控</a>
		<a class="item" href="spjk.html">视频监控</a>
		<a class="item" href="hbjc.html">环保监测</a>
	  </div>
	</div>
<div class="grid-wrapper">
  <div class="left">
	<div class="wrapper left-side-bar">
    <div class="tab-t"><div class="tab-title">母猪存栏</div></div>
	
    <div class="calendar">
      <div class="tabs" id="calendarTabs">
        <div class="tab active">日历</div>
        <div class="tab">周历</div>
        <div class="tab">月历</div>
      </div>
      <div id="calendarWrapper">
        <div class="calendar-wrapper" style="display: block;">
          <div id="calendar-dayly"></div>
        </div>
        <div class="calendar-wrapper">
          <div id="calendar-weekly"></div>
        </div>
        <div class="calendar-wrapper">
          <div id="calendar-monthly"></div>
        </div>
      </div>
    </div>
    <div id="chartLeft1">
		<div class='chart-tab-t'><div class="chart-tab-title">存栏分布</div></div>
		<div id="chart-clfb"></div>
	</div>
    <div id="chartLeft2">
		<div class='chart-tab-t'><div class="chart-tab-title">胎次情况</div></div>
		<div id="chart-tcqk"></div>
	</div>
	<div class='left-side-table'>
		<table id='table-clfb' border='1' cellpadding='0' cellspacing='0' width="100%">
			<thead>
				<tr>
					<th>区域</th>
					<th>单元</th>
					<th colspan='4'>数量</th>
				</tr>
			</thead>
			<tbody>
			<tr>
				<td rowspan='2'>后备舍</td>
				<td>单元1</td>
				<td colspan='4'>23</td>
			</tr>
			<tr>
				<td>单元2</td>
				<td colspan='4'>25</td>
				
			</tr>
			<tr>
				<td colspan='2'></td>
				<td>配种</td>
				<td>怀孕</td>
				<td>返情</td>
				<td>流产</td>
			</tr>
			<tr>
				<td rowspan='4'>配怀舍</td>
				<td>单元1</td>
				<td>12</td>
				<td>32</td>
				<td>11</td>
				<td>11</td>
			</tr>
			<tr>
				<td>单元2</td>
				<td>12</td>
				<td>32</td>
				<td>11</td>
				<td>11</td>
			</tr>
			<tr>
				<td>单元3</td>
				<td>12</td>
				<td>32</td>
				<td>11</td>
				<td>11</td>
			</tr>
			<tr>
				<td>单元4</td>
				<td>12</td>
				<td>32</td>
				<td>11</td>
				<td>11</td>
			</tr>
			<tr>
				<td colspan='2'></td>
				<td>待产</td>
				<td>哺乳</td>
				<td colspan='2'>断奶</td>
			</tr>
			<tr>
				<td rowspan='5'>分娩舍</td>
				<td>单元1</td>
				<td>12</td>
				<td>32</td>
				<td colspan='2'>11</td>
			</tr>
			<tr>
				<td>单元2</td>
				<td>12</td>
				<td>32</td>
				<td colspan='2'>11</td>
			</tr>
			<tr>
				<td>单元3</td>
				<td>12</td>
				<td>32</td>
				<td colspan='2'>11</td>
			</tr>
			<tr>
				<td>单元4</td>
				<td>12</td>
				<td>32</td>
				<td colspan='2'>11</td>
			</tr>
			<tr>
				<td>单元5</td>
				<td>12</td>
				<td>32</td>
				<td colspan='2'>11</td>
			</tr>
			<tr>
				<td>单元4</td>
				<td>12</td>
				<td>32</td>
				<td colspan='2'>11</td>
			</tr>
			<tr>
				<td>单元5</td>
				<td>12</td>
				<td>32</td>
				<td colspan='2'>11</td>
			</tr>
			<tr>
				<td>单元4</td>
				<td>12</td>
				<td>32</td>
				<td colspan='2'>11</td>
			</tr>
			<tr>
				<td>单元5</td>
				<td>12</td>
				<td>32</td>
				<td colspan='2'>11</td>
			</tr>
			</tbody>
		</table>
	</div>
	</div>
  </div>
  <div class="center">
	<div class="wrapper">
    <div class="line1">
      <div class="cont">首页</div>
      <div class="division"></div>
      <div class="cont">2019-3-8</div>
      <div class="division"></div>
      
    </div>
    <div class="line2">
		
	  <div class='wait-finish'>
      <img src="images/todo.png" alt="">
	  <div class='wait-do'>待办</div>
	  </div>
	  <div class='cross-line'></div>
      <div class="list">
        <div class="item">
          <span class="title">待配种：</span>
          <span class="cont">262头，其中断奶21天未配91头头头头头头头头</span>
        </div>
		<div class="item">
          <span class="title">待配种：</span>
          <span class="cont">262头，其中断奶21天未配92头头头头头头头</span>
        </div>
        <div class="item">
          <span class="title">待配种：</span>
          <span class="cont">262头，其中断奶21天未配93头头头头头头头</span>
        </div>
        <div class="item">
          <span class="title">待配种：</span>
          <span class="cont">262头，其中断奶21天未配94头头头头头头头</span>
        </div>
      </div>
		
	</div>
    <div class="line3">
      <div id="chartCenter">
		<div class='chart-tab-t'><div class="chart-tab-title">月度非生产天数</div></div>
		<div id='chart-ydfscts'>
		
		</div>
	  </div>
    </div>
	</div>
  </div>
  <div class="right">
    <div class="wrapper">
    <div class="tab-t"><div class="tab-title">母猪淘汰</div></div>
	<div class='charts-content'>
    <div id="chartRight1">
		<div class='chart-tab-t'><div class="chart-tab-title">淘汰分布</div></div>
		<div id='chart-ttfb'></div>
	</div>
    <div id="chartRight2">
		<div class='chart-tab-t'><div class="chart-tab-title">月度淘汰数量</div></div>
		<div id='chart-ydttsl'></div>
	</div>
	</div>
	</div>
  </div>
  <div class="bottom">
    <div class="wrapper">
	<div class="tab-t"><div class="tab-title">批次配种分娩</div></div>
      <div class="chartBlock">
        <div id="chartBottom1">
			<div class='choosebtn'>
			<div class="choosepc">
				<div class="choose-item">选择批次</div>
				<div class="cont"><img alt="" src="images/swtich.png"></div>
				
			</div>
			<div class="choosebox">
				<div class='box-btns'>
					<a href="javascript:;" class="a_demo_two switch-bt-active">批次
                        </a>
					<a href="javascript:;" class="a_demo_two">区域
                        </a>
				</div>
				<div class='tab-areas'>
					<div id='tab-area1' class="tab-area">
						<div class="pc-nums">
							<div class="item">
							  
							  <span class="cont">13245345753</span>
							</div>
							<div class="item">
							  
							  <span class="cont">13245345753</span>
							</div>
							<div class="item">
							  
							  <span class="cont">13245345753</span>
							</div>
							<div class="item">
							  
							  <span class="cont">13245345753</span>
							</div>
							<div class="item">
							  
							  <span class="cont">13245345753</span>
							</div>
							<div class="item">
							  
							  <span class="cont">13245345753</span>
							</div>
							<div class="item">
							  
							  <span class="cont">13245345753</span>
							</div>
						</div>
					</div>
					<div id='tab-area2' class="tab-area tabshow">
						<div class="select">
							<select name="build">
								<option value="后备舍">后备舍</option>
								<option value="配怀舍">配怀舍</option>
								<option value="分娩舍" selected>分娩舍</option>
								
							</select>
						</div>
						<div class='select-list'>
							<div class="item">
							  
							  <span class="cont">1单元</span>
							</div>
							<div class="item">
							  
							  <span class="cont">2单元</span>
							</div>
							<div class="item">
							  
							  <span class="cont">3单元</span>
							</div>
							<div class="item">
							  
							  <span class="cont">4单元</span>
							</div>
							<div class="item">
							  
							  <span class="cont">5单元</span>
							</div>
							<div class="item">
							  
							  <span class="cont">6单元</span>
							</div>
							<div class="item">
							  
							  <span class="cont">7单元</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			</div>
			<div class='chart-tab-t'><div class="chart-tab-title">配种分布</div></div>
			<div id="chart-pzfb1"></div>
			<div id="chart-pzfb2"></div>
		</div>
        <div id="chartBottom2">
			<div class='chart-tab-t'><div class="chart-tab-title">分娩产仔分布</div></div>
			<div id="chart-fmczfb1"></div>
			<div id="chart-fmczfb2">
				
			</div>
		</div>
      </div>
      
    </div>
  </div>
</div>
<script>
	var dom_clfb = document.getElementById("chart-clfb");
	var dom_tcqk = document.getElementById("chart-tcqk");
	var dom_ydfscts = document.getElementById("chart-ydfscts");
	var dom_ttfb = document.getElementById("chart-ttfb");
	var dom_ydttsl = document.getElementById("chart-ydttsl");
	var dom_pzfb1 = document.getElementById("chart-pzfb1");
	var dom_pzfb2 = document.getElementById("chart-pzfb2");
	var dom_fmczfb1 = document.getElementById("chart-fmczfb1");
	var dom_fmczfb2 = document.getElementById("chart-fmczfb2");
	var myChart_clfb = echarts.init(dom_clfb);
	var myChart_tcqk = echarts.init(dom_tcqk);
	var myChart_ydfscts = echarts.init(dom_ydfscts);
	var myChart_ttfb = echarts.init(dom_ttfb);
	var myChart_ydttsl = echarts.init(dom_ydttsl);
	var myChart_pzfb1 = echarts.init(dom_pzfb1);
	var myChart_pzfb2 = echarts.init(dom_pzfb2);
	var myChart_fmczfb1 = echarts.init(dom_fmczfb1);
	var myChart_fmczfb2 = echarts.init(dom_fmczfb2);
	var app = {};
	option_clfb=null,option_tcqk=null,option_ydfscts=null,option_ttfb=null,option_ydttsl=null,option_pzfb1=null,option_pzfb2=null,option_fmczfb1=null,option_fmczfb2=null;
	//存栏分布饼状图
	option_clfb = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    series: [
        {
            name:'存栏分布',
            type:'pie',
			radius:['60%', '80%'],
            center: ['50%', '55%'],
			label: {
                show: true,
                position: 'outside',
                formatter: '{b}：{c}({d}%) ',	
				textStyle:{
					color:'#fff',
					fontSize:14
				},
				
            },
            data:[
                {value:335, name:'流返母猪'},
                {value:310, name:'返情母猪'},
                {value:234, name:'配种母猪'},
                {value:135, name:'断奶母猪'},
                {value:1048, name:'怀孕母猪'},
                {value:251, name:'哺乳母猪'},
                {value:147, name:'后备母猪'},
                {value:102, name:'不发情母猪'}
            ]
        }
    ]
};
//胎次情况柱状图
option_tcqk = {
    tooltip : {
        trigger: 'axis'
    },
    calculable : true,
	grid:{
            x:80,
            y:45,
            x2:80,
            y2:30,
                  
    },
    xAxis : [
        {
            type : 'category',
			axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
            }
			},
            data : ['1胎次','2胎次','3胎次','4胎次','5胎次','6胎次','7胎次']
        }
    ],
    yAxis : [
        {
            type : 'value',
			axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
			},
			splitLine:{
			lineStyle: {
                        type: 'solid',
                        color: '#1c3860',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
			},
        }
    ],
    series : [
        {
            name:'母猪总数',
            type:'bar',
            data:[2, 4, 7, 23, 20, 7, 13],
			itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#965df2'
                        }, {
                            offset: 1,
                            color: '#efd8ef'
                        }]),
                    }
                },

        },
        {
            name:'平均分娩数',
            type:'bar',
            data:[6, 9, 13, 22, 17, 7, 1],
			itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#0aafb8'
                        }, {
                            offset: 1,
                            color: '#bfe7e9'
                        }]),
                    }
                },
        }
    ]
};
//月度非生产天数柱状图
option_ydfscts = {
    color: ['#3398DB'],
	
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid:{
            x:60,
            y:20,
            x2:60,
            y2:30,
                  
    },
    xAxis : [
        {
            type : 'category',
            data : ['2018.01', '2018.02', '2018.03', '2018.04', '2018.05', '2018.06', '2018.07','2018.08'],
            axisTick: {
                alignWithLabel: true
            },
			axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'2'//坐标线的宽度
            }
			},
        }
    ],
    yAxis : [
        {
            type : 'value',
			max:40,
			axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'2'//坐标线的宽度
            }
			},
			splitLine:{
			lineStyle: {
                        type: 'solid',
                        color: '#1c3860',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
		}
        }
    ],
    series : [
        {
            name:'月度非生产天数',
			
            type:'bar',
            barWidth: '60%',
            data:[10, 21, 4, 15, 24, 26, 17,15],
			itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#1d99eb'
                        }, {
                            offset: 1,
                            color: '#b4d4e9'
                        }]),
                    }
                },
        }
    ]
};
//淘汰分布饼状图
option_ttfb = {

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        right: 30,
        top: 20,
        bottom: 20,
        data: ['疾病','死亡','日龄过大','胎次过高','屡配不孕','分娩低产','繁殖障碍'],
		textStyle:{
			color:'#fff',
			
		}
    },
    series : [
        {
            name: '淘汰分布',
            type: 'pie',
            radius : '80%',
            center: ['40%', '50%'],
            data: [{value:10, name:'疾病'},{value:20, name:'死亡'},{value:30, name:'日龄过大'},{value:40, name:'胎次过高'},{value:33, name:'屡配不孕'},{value:12, name:'分娩低产'},{value:67, name:'繁殖障碍'}],
            itemStyle : {
			  normal : {
				label : {
				  show : true,
				  position:'inside',
				  formatter:'{d}%',
				  textStyle:{
					fontSize:10
				  }
				},
				labelLine : {
				  show : false
				}
			  },
		}
        }
    ]
};
//月度淘汰数量
option_ydttsl = {
	grid:{
            x:60,
            y:20,
            x2:60,
            y2:30,
            containLabel: true      
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
		axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
        }
		},
    },
    yAxis: {
        type: 'value',
		axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
        }
		},
		splitLine:{
			show:false
		}
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320,400,760,222,432,1000],
		itemStyle: {  
                normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                            offset: 0, color: '#f00' // 0% 处的颜色
                        }, {
                            offset: 0.5, color: '#e54330' // 100% 处的颜色
                        }, {
                            offset: 1, color: '#d08077' // 100% 处的颜色
                        }]
                    ),  //背景渐变色 
                    lineStyle: {        // 系列级个性化折线样式  
                        show:false
                    }
                },  
                emphasis: {  
                    color: '#ffeb3b',  
                    lineStyle: {        // 系列级个性化折线样式  
                        width:2,  
                        type: 'dotted',  
                        color: "#ffeb3b" //折线的颜色
                    }  
                }  
            },
        type: 'line',
        areaStyle: {}
    }]
};
//配种分布1金字塔
var colorA = ['#0050e3', '#0061e4', '#0076e4', '#0084e6', '#0084e6','#0084e6' ];
option_pzfb1 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    legend: {
        data: ['阳性','空胎','返情','流产','阴性','疑似'],
		textStyle:{
			color:'#fff',
		},
		bottom:'bottom'
    },
    calculable: true,
    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: '25%',
            top: 0,
            //x2: 80,
            width: '50%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 200,
            minSize: '0%',
            maxSize: '100%',
            sort: 'ascending',
            gap: 0,
			color: colorA,
            label: {
                show: true,
                position: 'outside',
				textStyle:{
					color:'#fff',
					fontSize:14
				}
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
				
                borderColor: '#fff',
                borderWidth: 0
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: [
				{value: 120, name: '阳性'},
                {value: 100, name: '空胎'},
                {value: 80, name: '返情'},
                {value: 60, name: '流产'},
                {value: 40, name: '阴性'},
                {value: 20, name: '疑似'}
            ]
        }
    ]
};
////配种分布2仪表盘
option_pzfb2 = {
    tooltip : {
        formatter: "{a} <br/>{c}%"
    },
    toolbox: {
        show: false,
        feature: {
            restore: {show: false},
            saveAsImage: {show: false}
        }
    },
    series : [
        {
            name: '配种分娩率',
            type: 'gauge',
            center: ['50%', '50%'],
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '85%',
             axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, '#ff4500'],[0.8, '#1e90ff'],[1, 'lime']],
                    width: 3,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                length: 15,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            splitLine: {           // 分隔线
                length: 20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
			axisLabel: {            // 坐标轴小标记
              
                textStyle: {       // 属性lineStyle控制线条样式
                   
                    fontSize:9,   //改变仪表盘内刻度数字的大小
                    //shadowColor : '#000', //默认透明
					}
			},
			pointer: {
                width:3,//指针的宽度
                length:"60%", //指针长度，按照半圆半径的百分比
                shadowColor : '#ccc', //默认透明
                shadowBlur: 5
            },
            title : {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
				offsetCenter: [0, '65%'] ,
                fontWeight: 'bolder',
                fontSize: 12,
				color:"#fff",
                fontStyle: 'italic'
            },
            detail : {
				fontSize: 12,
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                formatter: function (value) {
                    value = (value + '').split('.');
                    value.length < 2 && (value.push('00'));
                    return ('00' + value[0]).slice(0-value[0].length)
                        + '.' + (value[1] + '00').slice(0, 2)+'%';
                }
            },
			textStyle:{
			color:"#fff",
			fontSize:12
			},
            data:[{value: 75.23, name: '配种分娩率'}]
        }
    ]
};
//分娩产仔分布1柱状图
var dataAxis = ['健仔', '弱仔', '畸仔', '死胎', '木乃伊'];
var data = [444, 21, 34, 12, 15];

option_fmczfb1 = {
	grid:{
            x:45,
            y:25,
            x2:45,
            y2:25,
                  
        },
    xAxis: {
		type: 'category',
        data: dataAxis,
        axisLabel: {
            inside: false,
            textStyle: {
                color: '#fff',
				fontSize:14
            },
			
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
        }
    },
    yAxis: {
		
		axisLabel : {

            

        },
        axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
        },
        axisTick: {
            show: true
        },

		splitLine:{
			lineStyle: {
                        type: 'solid',
                        color: '#1c3860',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
		},//网格线
    },
    series: [
		{
       
        type: 'pictorialBar',
		barWidth:"80%",
        barCategoryGap: '30%',
        symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
        //symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
            normal: {
                color: function(params) { 
                    var colorList = ['#fc232e','#fe9e1a','#22aeed','#52e461','#903397', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; 
                    return colorList[params.dataIndex] 
					},
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							color: '#fff',
							fontSize: 12
						}
					}
            }
        },
        data: data,
		}
    ]
};
//分娩产仔分布1仪表盘

option_fmczfb2 = {
    tooltip : {
        formatter: "{a} <br/>{c}"
    },
    toolbox: {
        show: false,
        feature: {
            restore: {show: false},
            saveAsImage: {show: false}
        }
    },
    series : [
        {
            name: '分娩活仔率',
            type: 'gauge',
            center: ['28%', '50%'],
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '90%',
             axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, '#ff4500'],[0.8, '#1e90ff'],[1, 'lime']],
                    width: 3,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                length: 15,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            splitLine: {           // 分隔线
                length: 20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
			axisLabel: {            // 坐标轴小标记
              
                textStyle: {       // 属性lineStyle控制线条样式
                   
                    fontSize:9,   //改变仪表盘内刻度数字的大小
                    //shadowColor : '#000', //默认透明
					}
			},
			pointer: {
                width:3,//指针的宽度
                length:"60%", //指针长度，按照半圆半径的百分比
                shadowColor : '#ccc', //默认透明
                shadowBlur: 5
            },
            title : {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
				
                fontWeight: 'bolder',
                fontSize: 12,
				color:"#fff",
                fontStyle: 'italic'
            },
            detail : {
				fontSize: 12,
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                formatter: function (value) {
                    value = (value + '').split('.');
                    value.length < 2 && (value.push('00'));
                    return ('00' + value[0]).slice(0-value[0].length)
                        + '.' + (value[1] + '00').slice(0, 2)+'%';
                }
            },
			textStyle:{
			color:"#fff",
			fontSize:12
			},
            data:[{value: 88.23, name: '分娩活仔率'}]
        },
		{
            name: '窝均活仔数',
            type: 'gauge',
            center: ['65%', '50%'],
            min: 0,
            max: 20,
            splitNumber: 10,
            radius: '90%',
             axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, '#ff4500'],[0.8, '#1e90ff'],[1, 'lime']],
                    width: 3,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                length: 15,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            splitLine: {           // 分隔线
                length: 20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
			axisLabel: {            // 坐标轴小标记
              
                textStyle: {       // 属性lineStyle控制线条样式
                   
                    fontSize:9,   //改变仪表盘内刻度数字的大小
                    //shadowColor : '#000', //默认透明
					}
			},
			pointer: {
                width:3,//指针的宽度
                length:"60%", //指针长度，按照半圆半径的百分比
                shadowColor : '#ccc', //默认透明
                shadowBlur: 5
            },
            title : {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
				
                fontWeight: 'bolder',
                fontSize: 12,
				color:"#fff",
                fontStyle: 'italic'
            },
            detail : {
				fontSize: 12,
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                formatter: function (value) {
                    value = (value + '').split('.');
                    value.length < 2 && (value.push('00'));
                    return ('00' + value[0]).slice(0-value[0].length)
                        + '.' + (value[1] + '00').slice(0, 2);
                }
            },
			textStyle:{
			color:"#fff",
			fontSize:12
			},
            data:[{value: 15.5, name: '窝均活仔数'}]
        }
    ]
};
if (option_clfb && typeof option_clfb === "object") {
    myChart_clfb.setOption(option_clfb, true);
}
if (option_tcqk && typeof option_tcqk === "object") {
    myChart_tcqk.setOption(option_tcqk, true);
}
if (option_ydfscts && typeof option_ydfscts === "object") {
    myChart_ydfscts.setOption(option_ydfscts, true);
}
if (option_ttfb && typeof option_ttfb === "object") {
    myChart_ttfb.setOption(option_ttfb, true);
}
if (option_ydttsl && typeof option_ydttsl === "object") {
    myChart_ydttsl.setOption(option_ydttsl, true);
}
if (option_pzfb1 && typeof option_pzfb1 === "object") {
    myChart_pzfb1.setOption(option_pzfb1, true);
}
if (option_pzfb2 && typeof option_pzfb2 === "object") {
    myChart_pzfb2.setOption(option_pzfb2, true);
}
if (option_fmczfb1 && typeof option_fmczfb1 === "object") {
    myChart_fmczfb1.setOption(option_fmczfb1, true);
}
if (option_fmczfb2 && typeof option_fmczfb2 === "object") {
    myChart_fmczfb2.setOption(option_fmczfb2, true);
}
</script>
<script src="js/scrollBar.js" type="text/javascript"></script>
<script>
	$('.line2 .list').scrollBar({
    barWidth: 5, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
    position: "y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
    wheelDis: 15 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
})
$('#tab-area1 .pc-nums').scrollBar({
    barWidth: 5, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
    position: "y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
    wheelDis: 24 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
})
$('#tab-area2 .select-list').scrollBar({
    barWidth: 5, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
    position: "y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
    wheelDis: 24 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
})
 

</script>
<script src="js/FlexoCalendar.js" type="text/javascript"></script>

<script src="js/fzfx.js" type="text/javascript"></script>
<body>
</html>