skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
	<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- 引入echarts文件 -->
<%-- <script src="plug-in/echarts/echarts.js"></script>
<script src="http://echarts.baidu.com/doc/example/timelineOption.js"></script>
 <script src="plug-in/jquery-1.7.2.js"></script> --%>
</head>
<body>
	<div id="main" style="height:500px;width: 100%; margin-left: 0px;float: left;"></div>
<!--    本地引入ECharts,'js/dist/'本地文件路径下 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="plug-in/echarts/timelineOption.js"></script>
<script type="text/javascript">
    //        路径配置,'./js/dist'本地文件路径
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                option = {
                    timeline:{
                        data:[
                        	'2008','2009','2010','2011','2012',
    			            '2013','2014','2015','2016','2017'
                        ],
                        label : {
                            formatter : function(s) {
                                return s.slice(0, 4);
                            }
                        },
                        autoPlay : true,
                        playInterval : 1000
                    },
                    options:[
                        {
                            title : {
                            	'text':'2008年电梯故障率',
    			                'subtext':'上海鼎善信息科技有限公司'
                            },
                            tooltip : {'trigger':'axis'},
                            legend : {
                                x:'right',
                                'data':['故障率'],
                                'selected':{
                                    '故障率':true
                                }
                            },
                            toolbox : {
                                'show':true,
                                orient : 'vertical',
                                x: 'right',
                                y: 'center',
                                'feature':{
                                    'mark':{'show':true},
                                    'dataView':{'show':true,'readOnly':false},
                                    'magicType':{'show':true,'type':['line','bar','stack','tiled']},
                                    'restore':{'show':true},
                                    'saveAsImage':{'show':true}
                                }
                            },
                            calculable : true,
                            grid : {'y':80,'y2':100},
                            xAxis : [{
                                'type':'category',
                                'axisLabel':{'interval':0},
                                'data':[
                                    '上海磊嘉','\n上海嘉城','上海奥的斯','\n上海远大','南通三菱','\n上海三菱','上海达青','\n上海日立',
                                    '上海马骥','\n上海现代','上海国泰','\n上海达青','上海永大','\n上海三菱安装','上海蒂森','\n通力',
                                    '上海铃木','\n上海斌菱','\n上海欣普'
                                    /* ,'海南','\n重庆','四川','\n贵州','广东',
                                    '云南','\n西藏','陕西','\n甘肃','青海','\n宁夏','新疆' */
                                ]
                            }],
                            yAxis : [
                                {
                                    'type':'value',
                                    'name':'故障率（%）',
                                    'max':100,
                                    axisLabel : {
            			                formatter: function(v){
            			                    return   v;
            			                }
            			            }
                                }
                               
                            ],
                            series : [
                                {
                                    'name':'故障率',
                                    'type':'bar',
                                    'markLine':{
                                        symbol : ['arrow','none'],
                                        symbolSize : [4, 2],
                                        itemStyle : {
                                            normal: {
                                                lineStyle: {color:'orange'},
                                                barBorderColor:'orange',
                                                label:{
                                                    position:'left',
                                                    formatter:function(params){
                                                        return Math.round(params.value);
                                                    },
                                                    textStyle:{color:'orange'}
                                                }
                                            }
                                        },
                                        'data':[{'type':'average','name':'平均值'}]
                                    },
                                    'data': dataMap.dataGDP['2008']
                                }
                            ]
                        },
    			        {
    			            title : {'text':'2009年电梯故障率'},
    			            series : [
    			                {'data': dataMap.dataGDP['2009']}
    			            ]
    			        },
    			        {
    			            title : {'text':'2010年电梯故障率'},
    			            series : [
    			                {'data': dataMap.dataGDP['2010']}
    			            ]
    			        },
    			        {
    			            title : {'text':'2011年电梯故障率'},
    			            series : [
    			                {'data': dataMap.dataGDP['2011']}
    			            ]
    			        },
    			        {
    			            title : {'text':'2012年电梯故障率'},
    			            series : [
    			                {'data': dataMap.dataGDP['2012']}
    			            ]
    			        },
    			        {
    			            title : {'text':'2013年电梯故障率'},
    			            series : [
    			                {'data': dataMap.dataGDP['2013']}
    			            ]
    			        },
    			        {
    			            title : {'text':'2014年电梯故障率'},
    			            series : [
    			                {'data': dataMap.dataGDP['2014']}
    			            ]
    			        },
    			        {
    			            title : {'text':'2015年电梯故障率'},
    			            series : [
    			                {'data': dataMap.dataGDP['2015']}
    			            ]
    			        },
    			        {
    			            title : {'text':'2016年电梯故障率'},
    			            series : [
    			                {'data': dataMap.dataGDP['2016']}
    			            ]
    			        },{
    			            title : {'text':'2017年电梯故障率'},
    			            series : [
    			                {'data': dataMap.dataGDP['2017']}
    			            ]
    			        }
                    ]
                };
 
 
                myChart.setOption(option);
            }
    );
</script>
</body>
</html>