亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何在Vue 中實現 Echarts 隨窗體變化

發布時間:2020-07-30 11:32:33 來源:億速云 閱讀:461 作者:Leah 欄目:web開發

這篇文章運用簡單易懂的例子給大家介紹如何在Vue 中實現 Echarts 隨窗體變化,代碼非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。

如何在Vue 中實現 Echarts 隨窗體變化

<p id="myChart" :style="{width: '100%', height: '345px'}"></p>
<script> export default {
mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
    var myChartContainer = document.getElementById('myChart');      //用于使chart自適應寬度,通過窗體寬計算容器高寬
    var resizeMyChartContainer = function(){
     myChartContainer.style.width=(document.body.clientWidth-75)+'px'
    }     //設置容器高寬
    resizeMyChartContainer()
    // 基于準備好的dom,初始化echarts實例
    var myChart = this.$echarts.init(myChartContainer)
     
    // 繪制圖表
    myChart.setOption({
      title: { text: '啟動次數' },
      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>

補充知識:echarts 圖表大小隨窗口變動而自適應變動(無需刷新瀏覽器調整)

問題提出:

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

如何在Vue 中實現 Echarts 隨窗體變化

原因分析及解決方案:

echars的圖標實例事實上并沒有主動的去綁定resize()事件,就是說顯示區域的大小改變內部并不知道,當你需要去做一些自適應的效果的時候,需要主動綁定這個時間才能達到自使用的效果,常見的如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)
  }

重點:

window.onresize = function () {
   map1.resize() ; // 如果有多個圖標變動,可寫多個
}

關于如何在Vue 中實現 Echarts 隨窗體變化就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

洞口县| 白河县| 岳阳县| 崇文区| 兴隆县| 抚松县| 阿拉善右旗| 枣庄市| 林甸县| 韩城市| 佛冈县| 江源县| 甘洛县| 黄浦区| 奇台县| 鄢陵县| 简阳市| 运城市| 阜南县| 庆城县| 齐齐哈尔市| 福贡县| 临西县| 济阳县| 济南市| 新干县| 射阳县| 吴江市| 任丘市| 玉树县| 水城县| 新兴县| 江阴市| 漠河县| 石河子市| 拜城县| 阆中市| 遂川县| 佛教| 邵阳市| 荃湾区|