html5手機app開發Echarts手機全屏展示

2.代碼

/**-----------------------------------*/
/**--------echarts旋轉樣式------------*/
.hlxny-echar-zoomIn{
    float: left;
    width: 20px;
    height: 20px;
    background: url('../img/zoomIn.png') center no-repeat;
    background-size:16px 16px;
}
.echarts-rotate-elseEle{
    display: none;
}
.pagecontent-rotate{
    top:0px!important;
    width: 100vw;
    height: 100vh;
}
.echarts-rotate-text{
    float:left;
    font-size: 10px;
    width: 40px;
    color:#9897a7;
    margin-top: 1px;
}
.echarts-rotate-div{
    display: flex;
    left:0px;
    top:0px;
    overflow:hidden;
    transform:rotate(90deg);
    width: 100vh;
    height: 100vw;
    margin-left: calc(50vw - 50vh);
    margin-top:calc(50vh - 50vw);
}
.echarts-rotate{
    width: 100vh;
    height: 100vw;
}
@keyframes myRorate
{
    0%{transform:rotate(0deg);margin-left: calc(50vw - 50vh);margin-top:calc(50vh - 50vw); }
    100%{transform:rotate(90deg); margin-left: calc(50vw - 50vh);margin-top:calc(50vh - 50vw);}
}

.echarts-rotate-hidden{
    display: none;
}
@keyframes hiddenRoate
{
    0%   {transform:rotate(0deg);opacity: 1;}
    100%  {transform:rotate(-90deg);opacity: 0;}
}
.echarts-else-rotate{
    transform:rotate(90deg)
}
           

<div class="hlxny-echar-zoomIn"  ng-click="rotateChange($event)"></div>
                <div class="echarts-rotate-text" ng-click="rotateChange($event)">切換</div>
           

legend:{
                show:false,
                data: [ '功率因數']
            },
           

/**
     * 圖表橫豎切換
     * @type {boolean}
     */
    $scope.isRotate = false;
    $scope.isClick = false;
    $scope.rotateChange = function($event){
        $scope.showModal('切換圖表中...');//顯示遮罩層
        //兩個click，冒泡，防止上一層的click
        $event.stopPropagation();
        if($scope.isClick == true){
            return;//重複點選
        }
        $scope.isClick = true;
        if($scope.isRotate==true){
            $scope.hideModal();
            /*            //恢複
             var div_pagecontent=angular.element(document.getElementsByClassName("page__content"));
             div_pagecontent.removeClass("pagecontent-rotate");
             $scope.isRotate = false;*/
        }else{
            var options = {
                animation: 'fade', // What animation to use
                rotateOption: $scope.barOption
            };
            mainNavi.pushPage($scope.baseUrl+'pagesV2/rotateEcharts/rotateEcharts.html', options);
        }
        $scope.isClick = false;
        $scope.hideModal();

    }
           

1.rotateEcharts.html

<div  ng-controller="rotateEchartsController"   class="echarts-rotate-div" >
    <iframe name="myIframe" id="myIframe" style="width:100%;height: 100%;" scrolling="no"  ></iframe>
</div>
           

2.rotateEchartsController.js

/**
 * Created by zyf on 2017/8/10 0010.
 */
app.controller('rotateEchartsController', ['$scope','$timeout','$hyHttp','$interval','$rootScope','$loginService',function($scope,$timeout,$hyHttp,$interval,$rootScope,$loginService){


    $scope.init = function(){
        $scope.rotateConfig = {
            theme: 'shine',
            dataLoaded: false
        };
        $scope.rotateOption = mainNavi.getCurrentPage().options.rotateOption;
        /*        $scope.rotateOption.tooltip.position  = function (point, params, dom, rect, size){
         console.log("point:",point);
         console.log("params:",params);
         console.log("dom:",dom);
         console.log("rect:",rect);
         console.log("size:",size);
         // 固定在頂部
         return [point[0], '10%'];
         }*/
        $scope.rotateConfig.dataLoaded = true;
        $scope.isRotate = true;
    }
    // $scope.init();


    $scope.init2 = function(){
        $scope.rotateConfig = {
            theme: 'shine',
            dataLoaded: false
        };
        //克隆一個新對象，以防止影響上一頁面資訊
        $scope.rotateOption = eval('(' + JSON.stringify(mainNavi.getCurrentPage().options.rotateOption) + ')');
        $scope.rotateOption.legend.show=true;//顯示圖例
        $scope.rotateOption.toolbox={
            right:25,
            itemSize:19,
            feature: {
                dataZoom: {},
                brush: {
                    type: [ "clear"]
                },
                myTool2: {
                    show: true,
                    title: "切換",
                    icon: "image://../../img/zoomOut.png",
                    onclick: "tempStr"
                }
            }
        };
        var data = JSON.stringify( $scope.rotateOption);
        data = data.replace('"tempStr"','function(){console.log(window.parent);window.parent.parentPop();}')
        var tat =angular.element(document.getElementById("myIframe"));
        var innerHTML = '<div style="width: 100vw;height: 100vh;overflow: hidden">'+
            '<div id="rotate_Echarts_div" class="echarts-rotate" style="width: 100%;height:100%" ></div>'+
            '<script src="js/echarts/echarts.min.js" notmin="0"></script>' +
            '<script>function test(){console.log(document.getElementById("rotate_Echarts_div"));' +
            'var mchart = echarts.init(document.getElementById("rotate_Echarts_div"), "default");'+
            'mchart.setOption('+data+');} test();</script>';

        //蘋果裝置
        //if(!!window.navigator.userAgent.match(/(ipad|iphone|ipod touch)/i)){
            tat.attr("src","pagesV2/rotateEcharts/test.html?data="+escape(data));
            $scope.rotateConfig.dataLoaded = true;
            $scope.isRotate = true;
        //}else{
        //    //安卓裝置
        //    tat.attr("srcdoc",innerHTML);
        //    $scope.rotateConfig.dataLoaded = true;
        //    $scope.isRotate = true;
        //}
        $scope.hideModal();//關閉遮罩層
    }

    $scope.init2();
}]);
           

3.test.html

<html>
<head></head>
<body>
<div style="width: 100%;height: 100%;overflow: hidden">
    <div id="rotate_Echarts_div" class="echarts-rotate" style="width: 100%;height:100%" ></div>
    <script src="../../js/echarts/echarts.min.js" notmin="0"></script>
    <script>
        function GetQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
    
    
        
        function test(){
            var mchart = echarts.init(document.getElementById("rotate_Echarts_div"), "default");
            var data=GetQueryString("data");
            if(data !=null && data.length>1){
                data = eval('('+GetQueryString("data")+')');
            }
            mchart.setOption(data);
            window.parent.parentHideModel();
        }
    test();
        </script>
    </div>
</body>