在 Vue 中實作 Echarts 隨窗體變化-js教程-PHP中文網

在 Vue 中實作 Echarts 隨窗體變化

Guanhui

發布： 2020-07-27 18:29:50

轉載

2106 人瀏覽過

在 Vue 中實作 Echarts 隨窗體變化

<p id="myChart" :style="{width: &#39;100%&#39;, height: &#39;345px&#39;}"></p>
<script> export default {
mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
    var myChartContainer = document.getElementById(&#39;myChart&#39;);      //用于使chart自适应宽度,通过窗体宽计算容器高宽
    var resizeMyChartContainer = function(){
     myChartContainer.style.width=(document.body.clientWidth-75)+&#39;px&#39;
    }     //设置容器高宽
    resizeMyChartContainer()
    // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(myChartContainer)
     
    // 绘制图表
    myChart.setOption({
      title: { text: &#39;启动次数&#39; },
      tooltip: {},
      xAxis: {
        type: &#39;category&#39;,
        data: [&#39;2019-02-15&#39;, &#39;2019-02-16&#39;, &#39;2019-02-17&#39;, &#39;2019-02-18&#39;, &#39;2019-02-19&#39;, &#39;2019-02-20&#39;, &#39;2019-02-21&#39;]
      },
      yAxis: {
         type:&#39;value&#39;
      },
      series: [{
        type: &#39;line&#39;,
        data: [0,0, 0, 7, 0, 0,12],
        smooth:true,
        symbol: &#39;circle&#39;, 
        symbolSize: 6, 
        itemStyle:{ 
          normal:{ 
             
            color:&#39;#fc8a0f&#39;, 
            lineStyle:{ 
              color:&#39;#ff9c35&#39; 
                } 
              } 
            }
      }],
    });
    window.onresize=function(){
     resizeMyChartContainer();
      myChart.resize();
    }
   }
  }}</script>

登入後複製

補充知識：echarts 圖表大小隨視窗變動而自適應變動（無需刷新瀏覽器調整）

問題提出：

#使用echars做完圖表之後，需要根據瀏覽器視窗的縮放做自適應效果。

原因分析及解決方案：

echars的圖示實例事實上並沒有主動的去綁定resize()事件，就是說顯示區域的大小改變內部並不知道，當你需要去做一些自適應的效果的時候，需要主動綁定這個時間才能達到自使用的效果，常見的如window.onresize = myChart.resize( )

範例：

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

登入後複製

#重點：

window.onresize = function () {
   map1.resize() ; // 如果有多个图标变动，可写多个
}

登入後複製

推薦教學：《 JS教程》

以上是在 Vue 中實作 Echarts 隨窗體變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！