在移动开发中,图表是一种常见的数据统计形式,但是在手机有限的屏幕中实现图文结合,图标会显示不清晰,这时需要图表能够支持横向旋转功能,以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)
}