把移动端网页弄成横屏时,echarts图表的交互出现问题

描述:当前是关于Echarts图表中的 柱状图 示例。
 
            //<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>