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

在vue中實(shí)現(xiàn)echarts隨窗體變化

 更新時(shí)間:2020年07月27日 15:18:10   作者:彩色泡泡  
這篇文章主要介紹了在vue中實(shí)現(xiàn)echarts隨窗體變化,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

<div id="myChart" :style="{width: '100%', height: '345px'}"></div>
<script> export default {
mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
    var myChartContainer = document.getElementById('myChart');      //用于使chart自適應(yīng)寬度,通過(guò)窗體寬計(jì)算容器高寬
    var resizeMyChartContainer = function(){
     myChartContainer.style.width=(document.body.clientWidth-75)+'px'
    }     //設(shè)置容器高寬
    resizeMyChartContainer()
    // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
    var myChart = this.$echarts.init(myChartContainer)
     
    // 繪制圖表
    myChart.setOption({
      title: { text: '啟動(dòng)次數(shù)' },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21']
      },
      yAxis: {
         type:'value'
      },
      series: [{
        type: 'line',
        data: [0,0, 0, 7, 0, 0,12],
        smooth:true,
        symbol: 'circle', 
        symbolSize: 6, 
        itemStyle:{ 
          normal:{ 
             
            color:'#fc8a0f', 
            lineStyle:{ 
              color:'#ff9c35' 
                } 
              } 
            }
      }],
    });
    window.onresize=function(){
     resizeMyChartContainer();
      myChart.resize();
    }
   }
  }}</script>

補(bǔ)充知識(shí):echarts 圖表大小隨窗口變動(dòng)而自適應(yīng)變動(dòng)(無(wú)需刷新瀏覽器調(diào)整)

問(wèn)題提出:

使用echars做完圖表之后,需要根據(jù)瀏覽器窗口的縮放做自適應(yīng)效果。

原因分析及解決方案:

echars的圖標(biāo)實(shí)例事實(shí)上并沒(méi)有主動(dòng)的去綁定resize()事件,就是說(shuō)顯示區(qū)域的大小改變內(nèi)部并不知道,當(dāng)你需要去做一些自適應(yīng)的效果的時(shí)候,需要主動(dòng)綁定這個(gè)時(shí)間才能達(dá)到自使用的效果,常見(jiàn)的如window.onresize = myChart.resize()

示例:

var map5 = echarts.init(document.getElementById('map5'));
  var option5 = {
    backgroundColor: '#def1f9',
    color: ['#c23531', '#1875ff'],
    title: {
      left: 10,
      top: 10,
      text: 'Bill charts for the past year'
    },
    // color: ['#1875ff', '#1fe6ab', '#eee119', '#ff3074', '#6f99d9'],
    legend: {
      top: 30,
      right: 30
    },
    tooltip: {},
 
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
      {type: 'bar'},
      {type: 'bar'}
    ]
  }
  map5.setOption(option5);
 
  window.onresize = function () {
    setTimeout(function () { 
      map1.resize()
      map2.resize()
      map3.resize()
      map4.resize()
      map5.resize()
    },10)
  }

重點(diǎn):

window.onresize = function () {
   map1.resize() ; // 如果有多個(gè)圖標(biāo)變動(dòng),可寫(xiě)多個(gè)
}

以上這篇在vue中實(shí)現(xiàn)echarts隨窗體變化就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue.js遞歸組件構(gòu)建樹(shù)形菜單

    Vue.js遞歸組件構(gòu)建樹(shù)形菜單

    這篇文章主要介紹了用Vue.js遞歸組件構(gòu)建一個(gè)可折疊的樹(shù)形菜單的教學(xué)內(nèi)容,有興趣的朋友跟著學(xué)習(xí)下。
    2017-12-12
  • Vue開(kāi)發(fā)中整合axios的文件整理

    Vue開(kāi)發(fā)中整合axios的文件整理

    這篇文章主要給大家整理了在Vue開(kāi)發(fā)中整合axios要用到的文件,在vue開(kāi)發(fā)中,不可避免要整合axios,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面來(lái)一起看看吧。
    2017-04-04
  • Vue如何通過(guò)瀏覽器控制臺(tái)查看全局data值

    Vue如何通過(guò)瀏覽器控制臺(tái)查看全局data值

    在寫(xiě)vue項(xiàng)目時(shí)想到一個(gè)問(wèn)題,項(xiàng)目里面的文件都是一個(gè)個(gè)的組件,如何在控制臺(tái)中修改,查看組件data里的值呢,下面這篇文章主要給大家介紹了關(guān)于Vue如何通過(guò)瀏覽器控制臺(tái)查看全局data值的相關(guān)資料,需要的朋友可以參考下
    2023-04-04
  • Vue+Echarts實(shí)現(xiàn)柱狀折線圖

    Vue+Echarts實(shí)現(xiàn)柱狀折線圖

    這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)柱狀折線圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • el-table?fixed固定列導(dǎo)致錯(cuò)位的解決方法介紹

    el-table?fixed固定列導(dǎo)致錯(cuò)位的解決方法介紹

    ElementUI中el-table設(shè)置指定列固定不動(dòng),不受滾動(dòng)條影響,下面這篇文章主要給大家介紹了關(guān)于el-table?fixed固定列導(dǎo)致錯(cuò)位的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • 如何查看vue-cli版本的兩個(gè)命令

    如何查看vue-cli版本的兩個(gè)命令

    這篇文章主要介紹了如何查看vue-cli版本的兩個(gè)命令問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • 使用Vue Router進(jìn)行路由組件傳參的實(shí)現(xiàn)方式

    使用Vue Router進(jìn)行路由組件傳參的實(shí)現(xiàn)方式

    Vue Router 為 Vue.js 應(yīng)用提供了完整的路由解決方案,其中包括了組件間的數(shù)據(jù)傳遞功能,通過(guò)路由組件傳參,我們可以輕松地在導(dǎo)航到新頁(yè)面時(shí)傳遞必要的數(shù)據(jù),本文將深入探討如何使用 Vue Router 進(jìn)行路由組件間的傳參,并通過(guò)多個(gè)示例來(lái)展示其實(shí)現(xiàn)方式
    2024-09-09
  • Vue整合Node.js直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作過(guò)程詳解

    Vue整合Node.js直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作過(guò)程詳解

    這篇文章主要給大家分享Vue整合Node.js,直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作的詳細(xì)過(guò)程,文中有詳細(xì)的代碼講解,具有一定的參考價(jià)值,需要的朋友可以參考下
    2023-07-07
  • vite配置@別名以及讓vscode智能提示路經(jīng)的步驟

    vite配置@別名以及讓vscode智能提示路經(jīng)的步驟

    這篇文章主要給大家介紹了關(guān)于vite配置@別名以及讓vscode智能提示路經(jīng)的步驟,文中通過(guò)代碼示例以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2023-08-08
  • Vue2.2.0+新特性整理及注意事項(xiàng)

    Vue2.2.0+新特性整理及注意事項(xiàng)

    本文是小編精心給大家收藏整理的關(guān)于Vue2.2.0+新特性,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-08-08

最新評(píng)論