Implémentez Echarts dans Vue pour changer avec le formulaire-js tutoriel-php.cn

Implémentez Echarts dans Vue pour changer avec le formulaire

Guanhui

Libérer： 2020-07-27 18:29:50

avant

2068 Les gens l'ont consulté

Implémentez Echarts dans Vue pour changer avec le formulaire

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

Copier après la connexion

Connaissances supplémentaires : la taille du graphique echarts change de manière adaptative à mesure que la fenêtre change ( Pas besoin de rafraîchir le navigateur pour ajuster)

Question :

Après avoir utilisé des echars pour créer des graphiques, vous devez créer des effets adaptatifs en fonction du zoom de la fenêtre du navigateur.

Analyse des causes et solution :

L'instance d'icône de echars ne lie pas réellement activement l'événement resize(), ce qui signifie que le changement de taille de la zone d'affichage n'est pas connu en interne. Lorsque vous devez effectuer certains effets adaptatifs, vous devez vous lier activement cette fois pour obtenir l'effet d'auto-utilisation. Les plus courants sont window.onresize = myChart.resize( )

Exemple :

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

Copier après la connexion

Points clés :

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

Copier après la connexion

Tutoriel recommandé : " Tutoriel JS》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!