Implementieren Sie Echarts in Vue, um Änderungen am Formular vorzunehmen-js-Tutorial-php.cn

Implementieren Sie Echarts in Vue, um Änderungen am Formular vorzunehmen

Guanhui

Freigeben： 2020-07-27 18:29:50

nach vorne

2102 Leute haben es durchsucht

Implementieren Sie Echarts in Vue, um Änderungen am Formular vorzunehmen

<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>

Nach dem Login kopieren

Zusätzliche Kenntnisse: Die Diagrammgröße von echarts ändert sich adaptiv, wenn sich das Fenster ändert. (Zum Anpassen muss der Browser nicht aktualisiert werden.)

Frage:

Nachdem Sie Echars zum Erstellen von Diagrammen verwendet haben, müssen Sie adaptive Effekte entsprechend dem Zoom erstellen des Browserfensters.

Ursachenanalyse und Lösung:

Die Icon-Instanz von echars bindet das resize()-Ereignis nicht wirklich aktiv, was bedeutet dass die Größenänderung des Anzeigebereichs intern nicht bekannt ist. Wenn Sie einige adaptive Effekte ausführen müssen, müssen Sie diese Zeit aktiv binden, um den Effekt der Selbstverwendung zu erzielen.

Beispiel:

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)
  }

Nach dem Login kopieren

Wichtige Punkte:

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

Nach dem Login kopieren

Empfohlenes Tutorial: " JS-Tutorial》

Das obige ist der detaillierte Inhalt vonImplementieren Sie Echarts in Vue, um Änderungen am Formular vorzunehmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!