欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Echarts圖表移動(dòng)端橫屏進(jìn)入退出的實(shí)現(xiàn)

 更新時(shí)間:2023年05月09日 10:07:14   作者:水冗水孚  
本文主要介紹了Echarts圖表移動(dòng)端橫屏進(jìn)入退出的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

效果圖

147.gif

代碼

<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步驟圖解

    這篇文章主要介紹了微信公眾號(hào)服務(wù)器驗(yàn)證Token步驟圖解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-12-12
  • js 封裝cookie操作的函數(shù)代碼

    js 封裝cookie操作的函數(shù)代碼

    這篇文章主要通過(guò)js封裝cookie的函數(shù)代碼,想用js實(shí)現(xiàn)cookies操作的朋友可以參考下
    2013-06-06
  • 原生JS實(shí)現(xiàn)首頁(yè)進(jìn)度加載動(dòng)畫

    原生JS實(shí)現(xiàn)首頁(yè)進(jìn)度加載動(dòng)畫

    這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)首頁(yè)進(jìn)度加載動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • 跨域解決之JSONP和CORS的詳細(xì)介紹

    跨域解決之JSONP和CORS的詳細(xì)介紹

    跨域常見(jiàn)的兩種方式,分別是jsonp和cors,這篇文章主要介紹了跨域解決之JSONP和CORS的詳細(xì)介紹,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2018-11-11
  • JS數(shù)組reduce()方法原理及使用技巧解析

    JS數(shù)組reduce()方法原理及使用技巧解析

    這篇文章主要介紹了JS數(shù)組reduce()方法原理及使用技巧解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • javascript布局查看器效果代碼

    javascript布局查看器效果代碼

    用js直接區(qū)分網(wǎng)頁(yè)布局代碼,大家可以看下他的原理
    2008-10-10
  • 使用canvas實(shí)現(xiàn)仿新浪微博頭像截取上傳功能

    使用canvas實(shí)現(xiàn)仿新浪微博頭像截取上傳功能

    用戶提供圖像大小尺寸不合適,如何用截取上傳呢?接下來(lái)小編教大家使用使用canvas實(shí)現(xiàn)仿新浪微博頭像截取上傳功能解決問(wèn)題,需要的朋友一起學(xué)習(xí)吧。
    2015-09-09
  • webpack結(jié)合express實(shí)現(xiàn)自動(dòng)刷新的方法

    webpack結(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-05
  • JavaScript實(shí)現(xiàn)基于十進(jìn)制的四舍五入實(shí)例

    JavaScript實(shí)現(xiàn)基于十進(jìn)制的四舍五入實(shí)例

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)基于十進(jìn)制的四舍五入的方法,實(shí)例分析了javascript針對(duì)數(shù)值判斷與相關(guān)運(yùn)算技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-07-07
  • JavaScript?12個(gè)有用的數(shù)組技巧

    JavaScript?12個(gè)有用的數(shù)組技巧

    數(shù)組是Javascript最常見(jiàn)的概念之一,它為我們提供了處理數(shù)據(jù)的許多可能性,熟悉數(shù)組的一些常用操作是很有必要的。本文將為大家介紹12個(gè)有用的JavaScript數(shù)組技巧,需要的朋友可以參考一下
    2021-12-12

最新評(píng)論