Echarts圖表移動(dòng)端橫屏進(jìn)入退出的實(shí)現(xiàn)
效果圖
代碼
<template> <div class="outWrap"> <div :class=" isHorizontalScreen ? 'horizontalEchartsFather' : 'verticalEchartsFather' " > <!-- 全屏進(jìn)入退出按鈕 --> <h3 @click="switchFn" :class="isHorizontalScreen ? 'horizontalIcon' : 'verticalIcon'" > {{ isHorizontalScreen ? "退出橫屏" : "進(jìn)入橫屏" }} </h3> <!-- echarts部分 --> <div id="echartsId" :class="isHorizontalScreen ? 'horizontal' : 'vertical'" ></div> </div> </div> </template> <script> import Echarts from "echarts"; export default { data() { return { myChart: null, // echarts的實(shí)例 isFull: false, // 是否全屏 isHorizontalScreen: false, // 是否是橫向屏幕,默認(rèn)false,默認(rèn)是豎向屏幕 option: { dataZoom: [ { type: "inside", }, ], xAxis: { data: [ "4.1", "4.2", "4.3", "4.4", "4.5", "4.6", "4.7", "4.8", "4.9", "4.10", "4.11", "4.12", "4.13", "4.14", "4.15", "4.16", "4.17", ], }, yAxis: {}, series: { name: "股價(jià)", type: "line", data: [ 51, 61, 71, 27, 19, 20, 15, 8, 21, 2, 19, 66, 88, 4, 21, 77, 6, ], itemStyle: { normal: { color: "green", //改變折線點(diǎn)的顏色 lineStyle: { color: "green", //改變折線顏色 }, }, }, }, }, }; }, watch: { // 當(dāng)橫屏進(jìn)入退出要重繪一下echarts isHorizontalScreen(newVal) { console.log("橫屏切換", newVal); this.myChart.setOption(this.option, true); this.$nextTick(() => { this.resize(); }); }, }, mounted() { // 添加自適應(yīng)監(jiān)聽(tīng) window.addEventListener("resize", this.resize); this.echarts(); }, methods: { // 初始化 echarts() { this.myChart = Echarts.init(document.querySelector("#echartsId")); this.myChart.setOption(this.option); }, resize() { this.myChart.resize(); // 窗口大小發(fā)生變化的時(shí)候重置 }, // 切換 水平垂直~全屏默認(rèn)屏 switchFn() { this.isHorizontalScreen = !this.isHorizontalScreen; this.isFull = !this.isFull; }, }, // 移除自適應(yīng)監(jiān)聽(tīng) beforeDestroy() { window.removeEventListener("resize", this.resize); }, }; </script> <style lang="less" scoped> // 最外層滿屏 .outWrap { width: 100%; height: 100vh; background: #e9e9e9; } /* 用于給豎向echarts畫布定位用 */ .verticalEchartsFather { width: 100%; height: 50%; background-color: #fff; position: relative; } // 豎向的正常百分比即可 .vertical { width: 100%; height: 100%; } /* 用于給橫向echarts畫布定位用,橫向就旋轉(zhuǎn)90度即可 */ .horizontalEchartsFather { transform: rotate(90deg); position: relative; width: 100%; } // 因?yàn)闄M向了,所以顛倒一下 .horizontal { width: 100vh; height: 100vw; } /* 進(jìn)入橫屏和退出橫屏兩套樣式,定位在不同的位置 */ .verticalIcon { position: absolute; top: 2px; right: 6px; z-index: 999; user-select: none; } .horizontalIcon { position: absolute; top: 2px; left: 6px; z-index: 999; user-select: none; } </style>
總結(jié)
橫屏的時(shí)候,即為豎屏旋轉(zhuǎn)90度,加上監(jiān)聽(tīng)控制,然后改一下樣式,最后別忘了重繪一下Echarts
到此這篇關(guān)于Echarts圖表移動(dòng)端橫屏進(jìn)入退出的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Echarts移動(dòng)端橫屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信公眾號(hào)服務(wù)器驗(yàn)證Token步驟圖解
這篇文章主要介紹了微信公眾號(hào)服務(wù)器驗(yàn)證Token步驟圖解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12原生JS實(shí)現(xiàn)首頁(yè)進(jìn)度加載動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)首頁(yè)進(jìn)度加載動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09使用canvas實(shí)現(xiàn)仿新浪微博頭像截取上傳功能
用戶提供圖像大小尺寸不合適,如何用截取上傳呢?接下來(lái)小編教大家使用使用canvas實(shí)現(xiàn)仿新浪微博頭像截取上傳功能解決問(wèn)題,需要的朋友一起學(xué)習(xí)吧。2015-09-09webpack結(jié)合express實(shí)現(xiàn)自動(dòng)刷新的方法
這篇文章主要給大家介紹了關(guān)于webpack結(jié)合express實(shí)現(xiàn)自動(dòng)刷新的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05JavaScript實(shí)現(xiàn)基于十進(jìn)制的四舍五入實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)基于十進(jìn)制的四舍五入的方法,實(shí)例分析了javascript針對(duì)數(shù)值判斷與相關(guān)運(yùn)算技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07JavaScript?12個(gè)有用的數(shù)組技巧
數(shù)組是Javascript最常見(jiàn)的概念之一,它為我們提供了處理數(shù)據(jù)的許多可能性,熟悉數(shù)組的一些常用操作是很有必要的。本文將為大家介紹12個(gè)有用的JavaScript數(shù)組技巧,需要的朋友可以參考一下2021-12-12