echarts的折线图、柱状图在移动端横屏展示

我以前按照网上的方法就会出现一下问题：点击打开链接

问题：旋转了页面确实可以横屏查看了，但是在使用x轴的绑定点击事件时发现，折线图只是看起来横屏了，实际的坐标数据并没有随着页面旋转而旋转。

现在我找到了另外一种方法，完美的避免了该问题。

思路：

代码样例：【这是我直接在echarts官方样例中进行修改的，大家可以看看它原本的形式，可以直接复制这代码到echarts官方样例中查看】

option = {
    tooltip : {
        trigger: 'axis',
        extraCssText:'transform: rotate(90deg)'
    },    
    xAxis: {
        type: 'value', //数据
        position :'top', //x 轴的位置【top bottom】
        nameRotate :-90, //坐标轴名字旋转，角度值。
        axisLabel :{  //坐标轴刻度标签的相关设置。
           rotate : 90 //刻度标签旋转的角度，
        },
        scale: true, //是否是脱离 0 值比例
    },
    yAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        inverse :'true', //是否是反向坐标轴。
        axisLabel :{
            rotate : -90
        },
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true //是否平滑曲线显示
    }]
};

 

运行后这是我f12后的移动端出现的结果

 

这样是不是起到了横屏的效果，还避免了x轴绑定事件绑定的问题。。。。。。。。