亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

<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)寬度,通過窗體寬計(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)(無需刷新瀏覽器調(diào)整)

問題提出:

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

原因分析及解決方案:

echars的圖標(biāo)實(shí)例事實(shí)上并沒有主動(dòng)的去綁定resize()事件,就是說顯示區(qū)域的大小改變內(nèi)部并不知道,當(dāng)你需要去做一些自適應(yīng)的效果的時(shí)候,需要主動(dòng)綁定這個(gè)時(shí)間才能達(dá)到自使用的效果,常見的如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),可寫多個(gè)
}

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

相關(guān)文章

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

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

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

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

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

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

    在寫vue項(xiàng)目時(shí)想到一個(gè)問題,項(xiàng)目里面的文件都是一個(gè)個(gè)的組件,如何在控制臺(tái)中修改,查看組件data里的值呢,下面這篇文章主要給大家介紹了關(guān)于Vue如何通過瀏覽器控制臺(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ò)位的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • 如何查看vue-cli版本的兩個(gè)命令

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

    這篇文章主要介紹了如何查看vue-cli版本的兩個(gè)命令問題,具有很好的參考價(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ù)傳遞功能,通過路由組件傳參,我們可以輕松地在導(dǎo)航到新頁面時(shí)傳遞必要的數(shù)據(jù),本文將深入探討如何使用 Vue Router 進(jìn)行路由組件間的傳參,并通過多個(gè)示例來展示其實(shí)現(xiàn)方式
    2024-09-09
  • Vue整合Node.js直連Mysql數(shù)據(jù)庫進(jìn)行CURD操作過程詳解

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

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

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

    這篇文章主要給大家介紹了關(guān)于vite配置@別名以及讓vscode智能提示路經(jīng)的步驟,文中通過代碼示例以及圖文介紹的非常詳細(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)論