移动端(APP、微信)混合开发下ECharts图横屏旋转

在移动开发中,图表是一种常见的数据统计形式,但是在手机有限的屏幕中实现图文结合,图标会显示不清晰,这时需要图表能够支持横向旋转功能,以angularJS下ECharts图表为例,通过如下代码即可实现旋转:

 var options = {
       animation: 'fade', // What animation to use
       rotateOption: $scope.barOption
 };
 mainNavi.pushPage($scope.baseUrl+'pagesV2/rotateEcharts/rotateEcharts.html', options);

示例效果如下:

 

实现则是通过以下三个文件实现,实现组件化的Echarts图旋转

首先通过pushPage将数据传递给rotateEcharts.html页面,在rotateEcharts.html页面中嵌套iframe,iframe指向test.html页面,test页面则是旋转的echarts图,支持横线图标数据的点击与查看,不会出现X/Y轴数据未旋转的情况,已在APP、微信多个项目中应用。

----------------------------------------------------------------------------------------------------------------

--------------------------------------------------代码实现--------------------------------------------------

----------------------------------------------------------------------------------------------------------------

rotateEcharts.html页面,该页面是一个入门页面,内置Iframe而不是直接旋转主要为了解决“Echarts图旋转后X/Y轴坐标不选择问题”,该方式在Android、IOS、微信中都已经验证,五个上线的项目都正常使用,后续有问题持续更新中。。。

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

rotateEcharts.html页面控制器rotateEchartsController.js,原本是通过url传递数据,在后续的项目中发现数据过长导致的404问题,现通过localstory处理,同时处理旋转后X、Y轴数据异常问题、旧数据与新数据项目干扰的问题

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();localStorage.setItem("rotateEchartsData","");}')
        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>';
        //解决通过url传递数据,数据过长导致的404问题,现通过localstory处理,原url传递去掉
        localStorage.setItem("rotateEchartsData",escape(data));
        tat.attr("src","pagesV2/rotateEcharts/test.html");
        $scope.rotateConfig.dataLoaded = true;
        $scope.isRotate = true;


        原方式通过url后卫拼接的方式传递数据,
        //tat.attr("src","pagesV2/rotateEcharts/test.html?data="+escape(data));
        //$scope.rotateConfig.dataLoaded = true;
        //$scope.isRotate = true;

        $scope.hideModal();//关闭遮罩层
    }

    $scope.init2();
}]);

Echarts图横向旋转页面test.html,这个页面首先通过css进行页面旋转,然后通过localStorage中获取echarts图标数据,在关闭时调用父窗口的popPages()进行关闭,关闭的同时清理localStorage中的图表数据。window.parent.parentHideModel()方法,大家在主页面自行增加window.parentHideModel =function(){........}

<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")+')');
            }else{
                data=localStorage.getItem("rotateEchartsData");
                if(data!=null&&data!=""){
                    data = unescape(data);
                    data = eval('('+data+')');
                }
            }
            console.log("---data:",data);
            mchart.setOption(data);
            window.parent.parentHideModel();
        }
    test();
        </script>
    </div>
</body>

样式文件

/**-----------------------------------*/
/**--------echarts旋转样式------------*/
.hlxny-echar-zoomIn{
    float: left;
    width: 20px;
    height: 20px;
    background: url('../img/zoomIn.png') center no-repeat;
    background-size:16px 16px;
}
.hlxny-echar-zoomIn-right{
    float: right;
    width: 20px;
    height: 20px;
    background: url('../img/zoomIn.png') center no-repeat;
    background-size:16px 16px;
}
.echarts-rotate-text-right{
    float:right;
    font-size: 10px;
    width: 40px;
    color:#9897a7;
    margin-top: 1px;
}
.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)
}

 

评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牟云飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值