1. 程式人生 > >echarts的折線圖、柱狀圖在移動端橫屏展示

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軸繫結事件繫結的問題。。。。。。。。