把移动端网页弄成横屏时，echarts图表的交互出现问题echarts 柱状配置项内容和展示
比如说，我想点周三这跟柱子，要点200-300这一段才会出现tooltip，其他部分没有反应。
配置项如下
//<head>
//<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
//<style type="text/css">
// * {
// /*初始化样式*/
// margin: 0;
// padding: 0;
// }
// html {
// /*用于 获取 屏幕的可视宽高*/
// width: 100%;
// height: 100%;
// overflow: hidden;
// }
// body {
// /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
// position: fixed;
// left: 0;
// top: 0;
// width: 100%;
// height: 100%;
// }
// @media screen and (orientation:portrait) {
// /*竖屏样式*/
// body {
// transform-origin: 0 0;
// transform: rotateZ(90deg) translateY(-100%);
// }
// }
// </style>
// </head>
option = {
color: ['#3398DB'],
//backgroundColor:'#fff',
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
//<script>
//(function () {
//function resize() {
//var body = document.getElementsByTagName('body')[0];
//var html = document.getElementsByTagName('html')[0];
//var width = html.clientWidth;
//var height = html.clientHeight;
//var max = width > height ? width : height;
//var min = width > height ? height : width;
//body.style.width = max + "px";
//body.style.height = min + "px";
//}
//resize();
//window.addEventListener("resize", resize)
//})();
//</script>
截图如下
