フォームで変更する Echarts を Vue に実装する-jsチュートリアル-php.cn

フォームで変更する Echarts を Vue に実装する

Guanhui

リリース： 2020-07-27 18:29:50

転載

2107 人が閲覧しました

フォームで変更する Echarts を Vue に実装する

<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 チュートリアル>>

以上がフォームで変更する Echarts を Vue に実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。