如何实现 Echart 折线图的横屏显示？
1.用echart在手机上做了一个折线图，x轴是显示的当月日期，由于x轴内容过多无法清晰的查看，所以想用横屏的方式，尽可能把一个月30天都在x轴上不重叠的显示（知道echart的滚动条可以拉伸，但是需求是要做横屏的比较方便查看）；
2.我用网上找的方法，旋转了页面确实可以横屏查看了，但是在使用x轴的绑定点击事件时发现，折线图只是看起来横屏了，实际的坐标数据并没有随着页面旋转而旋转。
不知道怎么办了，求大神帮忙
页面是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;">酒店总房数</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/lib/zepto/zepto.min.js"></script>-->
<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为用户点击蒙版时自动执行的回调；
maskState = false
mask.show();//显示遮罩
$('#fresh').show()
var monthCountBar;
document.getElementById('pieFrm').style.height = document.body.scrollHeight-75 +"px"
/*
* ajax 封装
*/
var ajaxMethod = {
//ajax请求数据
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("服务器连接失败！")
$('#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) 后，可以一直使用。
* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
*/
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 = a[0]["name"]+":<br/>";
var i = a[0]["name"].split("日")[0]
i = parseInt(i)-1
relVal += a[0]["seriesName"].split("率")[0]+"数:";
relVal += roomCountArray[i]["count"]+"间<br/>"
relVal += a[1]["seriesName"].split("率")[0]+"数:";
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, //结束值为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;
}
//获取房间总数
function GetAllRoom(){
maskState = false
mask.show();//显示遮罩
$('#fresh').show()
console.log("获取总房数")
var sendData = {
// "constructioncode": "3509210100000214"
// "constructioncode": "3501040100000479"//3501820100000788
"constructioncode": consCode
};
var method = "GetList_RoomCode";
//手机号符号 判断是否已经存在
ajaxMethod.method(workAreaUrl + method, sendData, function(data) {
console.log("总房数："+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()
}
});
}
//获取当月每天房间入住数
function GetMonthRoom(month){
maskState = false
mask.show();//显示遮罩
$('#fresh').show()
console.log("获取当月每天入住房数")
var sendData = {
// "constructioncode": "3509210100000214",
// "constructioncode": "3501040100000479"//3501820100000788
"constructioncode": consCode,
"r_time":month
};
var method = "GetList_RoomCount";
//手机号符号 判断是否已经存在
ajaxMethod.method(probabilityUrl + method, sendData, function(data) {
console.log("当月每天入住房数："+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()
}
});
}
//获取当月每天微信使用的房间数
function GetMonthWebChat(month,dateMonth,dataRoom){
maskState = false
mask.show();//显示遮罩
$('#fresh').show()
console.log("获取当月每天微信使用房数")
var sendData = {
// "constructioncode": "3509210100000214",
// "constructioncode": "3501040100000479"//3501820100000788
"constructioncode": consCode,
"r_time":month
};
var method = "GetList_WebCount";
//手机号符号 判断是否已经存在
ajaxMethod.method(probabilityUrl + method, sendData, function(data) {
console.log("当月每天使用微信房数："+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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
横屏之后重新加载行不
找到一种方式，就是在页面中嵌套iframe，图表显示在iframe中。主页面控制iframe横屏竖屏的显示样式，并在点击横屏竖屏按钮时，触发iframe内的resize事件，然后重新绘制图表就可以
百度 echart移动端横屏展示，第一个就是，至于tooltip可以：extraCssText: 'transform:rotate(90deg)'
你好 请问你解决没这个问题 我也遇到了这个问题
我也遇到同样的问题，请问楼主解决了么