移动端（APP、微信）混合开发下ECharts图横屏旋转
在移动开发中，图表是一种常见的数据统计形式，但是在手机有限的屏幕中实现图文结合，图标会显示不清晰，这时需要图表能够支持横向旋转功能，以angularJS下ECharts图表为例，通过如下代码即可实现旋转：
var options = {animation: 'fade', // What animation to userotateOption: $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、微信中都已经验证，五个上线的项目都正常使用，后续有问题持续更新中。。。
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 = ''+''+'' +'';//解决通过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(){........}
样式文件
/**-----------------------------------*/
/**--------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)
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！