在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 如何實現(xiàn)Echart折線圖的橫屏顯示。

如何實現(xiàn)Echart折線圖的橫屏顯示。

1.用echart在手機上做了一個折線圖，x軸是顯示的當月日期，由于x軸內(nèi)容過多無法清晰的查看，所以想用橫屏的方式，盡可能把一個月30天都在x軸上不重疊的顯示（知道echart的滾動條可以拉伸，但是需求是要做橫屏的比較方便查看）；
2.我用網(wǎng)上找的方法，旋轉(zhuǎn)了頁面確實可以橫屏查看了，但是在使用x軸的綁定點擊事件時發(fā)現(xiàn)，折線圖只是看起來橫屏了，實際的坐標數(shù)據(jù)并沒有隨著頁面旋轉(zhuǎn)而旋轉(zhuǎn)。

圖片描述

不知道怎么辦了，求大神幫忙
頁面是mui做的，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../css/mui.min.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />

<!-- <link rel="stylesheet" href="test2.less"> -->
<style>

@media screen and (orientation: portrait) {
  .main {
      -webkit-transform:rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    width: 100vh;
    height: 100vh;
    overflow: hidden;
    background-color: #FFFFFF;
  }
}

@media screen and (orientation: landscape) {
  .main {
    -webkit-transform:rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    background-color: #FFFFFF;
  }
}

.choiceBtn{
        position: absolute;
        height: 40px;
        width: 150px;
        height: 35px;
        top: 50%;
        left: 50%;
        margin-left: -75px;
        margin-top: -17.5px;
          color: #FFFFFF;
          border: solid 1px #FFFFFF;
          border-radius:10px ;
          background: #54BBA0;
    }

</style>
</head>
<body>
<div class="main">

  <header id="headerheight" class="mui-bar mui-bar-nav" style="background-color: #54BBA0;">
            <a class="mui-icon mui-action-back mui-icon-back mui-pull-left" style="color: #FFFFFF;"></a>
            <button id="choiceMonth" class="choiceBtn" data-options='{"type":"month"}'>點擊選月份</button>
        </header>
    
    <div class="mui-content">
        <div id="pieFrm" class="" style="background: #FFFFFF;">
            <div class="" style="background: #FFFFFF;height:100%;">
                <table id="AttriColu" bgcolor="#FFFFFF" height="40px" border="0" width="100%" align="center" style="border-bottom: solid 1px #DDDDDD;">
                    <th width="50%" class="mui-h5" style="border-right:solid 1px #DDDDDD;border-top:solid 1px #DDDDDD;font-size: 14px;color: #000000;">酒店總房數(shù)</th>
                    <th width="50%" style="border-right:solid 1px #DDDDDD;border-top:solid 1px #DDDDDD;font-size: 14px; color: #000000;">
                        <h5 id="allRoomCount"></h5>
                    </th>
                </table>
                <div id="monthCount" style="width: 100%;height:98%;"></div>
            </div>
        </div>
    </div>
    
    <div id="fresh" style="display: none; z-index: 9998; position: absolute;top: 43%;left: 40%;border-radius:18px;background-color: rgba(0,0,0,0.2);border: solid 0px;height: 80px;width:80px ;">
        <a class="mui-tab-item mui-active">
            <span class="mui-spinner" style="margin-top: 15px;margin-left: 27.5px;"></span>
            <h5 class="mui-tab-label" style="color: #FFFFFF;margin-left: 18.5px;">請稍候</h5>
        </a>
    </div>

</div>
<script src="../js/mui.min.js"></script>

<script src="../js/url.js"></script>
<script src="../js/echarts-en.min.js"></script>
<!--<script src="../libs/echarts-all.js"></script>-->
<script src="../js/mui.picker.min.js"></script>
<script type="text/javascript" src="../js/jquery-2.1.0.js" ></script>
<script type="text/javascript">
    mui.init()
</script>

<!--<script type="text/javascript" src="http://img3.fdc.com.cn/m/js/l...
<script>
// var orientationFun = function(){
// var width_doc = document.documentElement.clientWidth;
// var height_doc = document.documentElement.clientHeight; //文檔流的高度
// var _width = screen.width;
// var _height = screen.height; //屏幕的高度
// if (window.orientation == 180 || window.orientation == 0) {
// if(_width<_height){
// alert('body寬高：('+width_doc+','+height_doc+') print容器寬高：('+$('#print').width()+","+$('#print').height()+")");
// $('.main').css({'transform': 'rotate(90deg)'});
// $('.main').width(height_doc);
// $('.main').height(width_doc);
// $('.main').offset({top:0});
// $('#test').html('body寬高：('+width_doc+','+height_doc+') print容器寬高：('+$('.main').width()+","+$('.main').height()+")")
// }else{}
// }
// if (window.orientation == 90 || window.orientation == -90 ){
// $('.main').css({'transform': 'rotate(0)'});
// $('.main').width(_height);
// $('.main').height(_width);
// alert('body寬高：('+width_doc+','+height_doc+') print容器寬高：('+$('#print').width()+","+$('#print').height()+")");
// $('#test').html('body寬高：('+width_doc+','+height_doc+') print容器寬高：('+$('.main').width()+","+$('.main').height()+")")
// }
// }
//
// window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
// orientationFun();
// }, false);
//
// orientationFun();

var consCode = "3509210100000214"

// var consCode = localStorage.getItem("hotelCode")

    
    var roomCountArray=[],weChatCountArray=[]
    var maskState = false;
    var mask = mui.createMask(function(){
        return maskState;
    });//callback為用戶點擊蒙版時自動執(zhí)行的回調(diào)；
    maskState = false
    mask.show();//顯示遮罩
    $('#fresh').show()
    
    var monthCountBar;
    document.getElementById('pieFrm').style.height = document.body.scrollHeight-75 +"px"
    
    /*
     * ajax 封裝
     */
    var ajaxMethod = {
        //ajax請求數(shù)據(jù)
        method: function(murl, mdata, success) {
            console.log(murl+" + "+JSON.stringify(mdata))
            jQuery.ajax({
                type: "post",
                url: murl,
                dataType: "jsonp",
                data: mdata, 
                error: function(data) {
                    console.log(JSON.stringify(data));
                    mui.alert("服務(wù)器連接失敗！")
                    $('#fresh').hide()
                    maskState = true
                    mask.close()
                },
                success: function(data) {
                    success ? success(data) : function() {};
                }
            });
        }
    }
    
    //計算某月的最后一天日期
    function showMonthLastDay(text)     
    {     
    var year = text.split("-")[0]
    var month = text.split("-")[1]
    var MonthNextFirstDay=new Date(year,month,1);     
    var MonthLastDay=new Date(MonthNextFirstDay-86400000);
    return MonthLastDay.getDate();     
    }
    
    (function($) {
        $.init();
        var btns = $('.choiceBtn');
        btns.each(function(i, btn) {
            btn.addEventListener('tap', function() {
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var id = this.getAttribute('id');
                /*
                 * 首次顯示時實例化組件
                 * 示例為了簡潔，將 options 放在了按鈕的 dom 上
                 * 也可以直接通過代碼聲明 optinos 用于實例化 DtPicker
                 */
                var picker = new $.DtPicker(options);
                picker.show(function(rs) {
                    /*
                     * rs.value 拼合后的 value
                     * rs.text 拼合后的 text
                     * rs.y 年，可以通過 rs.y.vaue 和 rs.y.text 獲取值和文本
                     * rs.m 月，用法同年
                     * rs.d 日，用法同年
                     * rs.h 時，用法同年
                     * rs.i 分（minutes 的第二個字母），用法同年
                     */
                    document.getElementById(id).innerText = rs.text+"月";
                    GetAllRoom()
                    
                    /*
                     * 釋放組件資源，釋放后將將不能再操作組件
                     * 通常情況下，不需要示放組件，new DtPicker(options) 后，可以一直使用。
                     * 當前示例，因為內(nèi)容較多，如不進行資原釋放，在某些設(shè)備上會較慢。
                     * 所以每次用完便立即調(diào)用 dispose 進行釋放，下次用時再創(chuàng)建新實例。
                     */
                    picker.dispose();
                });
            }, false);
        });
    })(mui);
    
    function InitEchart(tuTitle,dateMonth,dataRoom,dataPerson){

// alert("房間入住率："+dataRoom)
// alert("微信使用率："+dataPerson)

        var echartObj = {
            title : {
                text: tuTitle,
                y:0,
                x:'center'
               },
               tooltip : {
                       axisPointer:{
                           type:'cross',
                       },
                   trigger: 'axis',
                   formatter: 
                   function(a){
                    var relVal = "";

// a[1]=a["name"]
// a[0]=a["seriesName"]
// a[2]=a["value"]

                    console.log(JSON.stringify(a[1]))

// relVal = a0+":<br/>";

                    var i = a[0]["name"].split("日")[0]
                    i = parseInt(i)-1
                    
                    relVal += a[0]["seriesName"].split("率")[0]+"數(shù):";
                    relVal += roomCountArray[i]["count"]+"間<br/>"
                    relVal += a[1]["seriesName"].split("率")[0]+"數(shù):";
                    relVal += weChatCountArray[i]["count"]+"間<br/>"
                    relVal += a[0]["seriesName"]+":"+a[0]["value"]+"%<br/>";
                    relVal += a[1]["seriesName"]+":"+a[1]["value"]+"%";
                    return relVal;
                }
               },
            legend: {
                y:'40',
                data: ['房間入住率', '微信使用率']
            },
            grid: {
                x: 33,
                x2: 8,
                y: 80,
                y2: 50
            },
            calculable: false,
            xAxis: [{

// inverse:true,

                type: 'category',
                triggerEvent:true,
                axisLabel :{

// rotate:271,

                    interval:0,
                    clickable:true
                },
                data: dateMonth,
            }],
            yAxis: [{

// axisLine:{ // 隱藏X軸
// show: false
// },
// axisTick:{ // 隱藏刻度線
// show: false
// },

                type: 'value',
                name: '入住/使用率\n（%）',

// inverse:true,

                splitArea: {
                    show: true,
                },
                max:100,
           axisLabel: {
//                           rotate:270,
            formatter: '{value}',
//                        clickable:true
        }
            }],

// dataZoom:{
// orient: "horizontal", //水平顯示
// show: true, //顯示滾動條
// start: 0, //起始值為20%
// end: 100, //結(jié)束值為60%
// },

            series: [{
                symbolSize:15,
                name: '房間入住率',
                type: 'line',
                data: dataRoom,
                silent:true,
                itemStyle: {
               normal:{
                 label:{
//                                 rotate:270,
                     show:true,
                     formatter: '{c}%'
                 }
               }
           }
            }, {
                name: '微信使用率',
                type: 'line',
                symbolSize:15,
                data: dataPerson,
                silent:true,
                itemStyle: {
               normal:{
                 label:{
//                                 rotate:270,
                     show:true,
                     formatter: '{c}%'
                 }
               }
           }
            }]
        };
        return echartObj;
    }
    
    //獲取房間總數(shù)
    function GetAllRoom(){
      maskState = false
        mask.show();//顯示遮罩
        $('#fresh').show()
        console.log("獲取總房數(shù)")

        var sendData = {

// "constructioncode": "3509210100000214"
// "constructioncode": "3501040100000479"http://3501820100000788

            "constructioncode": consCode
        };

        var method = "GetList_RoomCode";
        //手機號符號 判斷是否已經(jīng)存在
        ajaxMethod.method(workAreaUrl + method, sendData, function(data) {
            console.log("總房數(shù)："+JSON.stringify(data));
            if(data != null) {
                document.getElementById('allRoomCount').innerText = JSON.stringify(data)
                
                GetMonthRoom(document.getElementById('choiceMonth').innerText.split("月")[0])
                
                $('#fresh').hide()
                maskState = true
                mask.close()
            }
        });
  }
    
    //獲取當月每天房間入住數(shù)
    function GetMonthRoom(month){
      maskState = false
        mask.show();//顯示遮罩
        $('#fresh').show()
        console.log("獲取當月每天入住房數(shù)")

        var sendData = {

// "constructioncode": "3509210100000214",
// "constructioncode": "3501040100000479"http://3501820100000788

            "constructioncode": consCode,
            "r_time":month
        };

        var method = "GetList_RoomCount";
        //手機號符號 判斷是否已經(jīng)存在
        ajaxMethod.method(probabilityUrl + method, sendData, function(data) {
            console.log("當月每天入住房數(shù)："+JSON.stringify(data));
            if(data != null) {
                roomCountArray = data;
                var dateMonth=[],dataRoom=[]
                var allRoomCount = document.getElementById('allRoomCount').innerText
                for(var i=0;i<data.length;i++){
                    var theDate = returntime(data[i]["createtime"])

// dateMonth.push(theDate.split("-")[2]+"日")

                    dateMonth.push(theDate.split("-")[2]+"\n日")
                    dataRoom.push((data[i]["count"]/allRoomCount*100).toFixed(1))
                }
                GetMonthWebChat(month,dateMonth,dataRoom)
                
                $('#fresh').hide()
                maskState = true
                mask.close()
            }
        });
  }
    
    //獲取當月每天微信使用的房間數(shù)
    function GetMonthWebChat(month,dateMonth,dataRoom){
          maskState = false
        mask.show();//顯示遮罩
        $('#fresh').show()
        console.log("獲取當月每天微信使用房數(shù)")

        var sendData = {

// "constructioncode": "3509210100000214",
// "constructioncode": "3501040100000479"http://3501820100000788

            "constructioncode": consCode,
            "r_time":month
        };

        var method = "GetList_WebCount";
        //手機號符號 判斷是否已經(jīng)存在
        ajaxMethod.method(probabilityUrl + method, sendData, function(data) {
            console.log("當月每天使用微信房數(shù)："+JSON.stringify(data));
            if(data != null) {
                weChatCountArray = data;
                var dataPerson=[],tuTitle=month+"月入住情況"
                
                for(var i=0;i<data.length;i++){
                    dataPerson.push((data[i]["count"]/roomCountArray[i]["count"]*100).toFixed(1))
                }
                
                monthCountBar = echarts.init(document.getElementById('monthCount'));
                monthCountBar.setOption(InitEchart(tuTitle,dateMonth,dataRoom,dataPerson));
                
                monthCountBar.on('click', function (param) {

// alert(param.value)
// return

                    var ChooseDate = param.value//.replace(/\n/g, "");
                    ChooseDate = month+"-"+ChooseDate.split("日")[0]
                    window.location.href = 'hotel_daySituation.html?theDate='+ChooseDate
            })
                
                $('#fresh').hide()
                maskState = true
                mask.close()
            }
        });
  }
    
    //獲取今日日期的方法
    function Today() {
        var cMonth = new Date().getMonth() + 1;
        if(cMonth / 10 < 1) {
            cMonth = "0" + cMonth;
        }
        var dateMonth=[],dataRoom=[],dataPerson=[],tuTitle
        cDate = new Date().getFullYear() + "-" + cMonth;
        document.getElementById('choiceMonth').innerText = cDate+"月"
        GetAllRoom()
    }
        
    //解析時間createtime
    function returntime(times)
    {
        var date;
        var Y;
        var M;
        var D;
        var h;
        var m;
        var s;
        var time;
        time=times.substring(6,times.length-7);
        date = new Date(parseInt(time));
    Y = date.getFullYear() + '-'; //年
    M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';//月
    if ( date.getDate()<10) {
      D = '0'+date.getDate();//日
    }
    else
        D = date.getDate();//日
         
    time=Y+M+D;
    return time;
    }
        
    Today()

</script>
</body>
</html>

回答
編輯回答
哎呦喂

你好 請問你解決沒這個問題 我也遇到了這個問題

2017年1月17日 08:12
編輯回答
她愚我

我也遇到同樣的問題，請問樓主解決了么

2017年11月1日 17:44
編輯回答
祈歡

橫屏之后重新加載行不

2017年7月30日 23:19