Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Guanhui
Freigeben: 2020-07-27 18:29:50
nach vorne
2068 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!

Verwandte Etiketten:
Quelle:jb51.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage