echarts的折線圖、柱狀圖在移動端橫屏展示
阿新 • • 發佈:2019-01-05
我以前按照網上的方法就會出現一下問題:點選開啟連結
問題:旋轉了頁面確實可以橫屏查看了,但是在使用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軸繫結事件繫結的問題。。。。。。。。