vueはEChartsを使用する際の非同期アップデートとデータ読み込みの詳細

前言
最近はeChartsを勉強しています。非同期の更新とデータのロードを勉強しました。まとめてみる必要があると思います。方法以後は勉強を参考にして、本文を始める前に、eChartsに慣れていない友達は以下の文章を参考にしてもいいです。  以下は多く話しません。詳しく紹介してみましょう。
使い方
Echartsを使うにはまずEcharts.jsを導入しなければなりません。（ファイルの入り口に置いてあります。）

<script src="public/js/echarts.common.min.js"></script>

 
絵を描く前に、EChartsのために、高い幅のDOM容器を用意する必要があります。

<div id="main" style="width: 600px;height:400px;"></div>

echartsのインスタンスを初期化し、setOption方法によってあなたが欲しいグラフのタイプを生成します。
まず、echarteでsetOptionのoptionを単独で取り出して、dataに初期化します。

data() { return { 

　　　　

getSetOption: {//   

    title: {

     text: null

    },

    tooltip: {

     trigger: 'axis'

    },

    grid: {

     left: '3%',

     right: '4%',

     bottom: '3%',

     containLabel: true

    },

    yAxis: {

     type: 'value'

    },

    legend: {

     data: []

    },

 

    xAxis: {

     type: 'category',

     data: []

    },

 

    series: [

     {

      name: null,

      type: 'line',

      stack: '   ',

      data: []

     }

    ]

   },

 

   getPieOption: {//  

    title: { 

     text: null 

    },

 

    tooltip: {

     tooltip: 'item',

     formatter: "{a} <br/> {b} : {c} ({d}%)"

    },

    series : [

     {

      type: 'pie',

      radius: '55%',

      data:[

      ].sort(function(a,b){return a.value - b.value;}),

      roseType: 'angle',

     }

    ]

   },

　　}

}

以下はmethodsで初期化する方法です。 

drawLineChart() {

   this.lineChartOrder = echarts.init(document.getElementById('lineChartOrder'));

   this.lineChartOrder.setOption(this.getSetOption); 

  },

そしてmountedでこの方法を呼び出します。

  this.drawLineChart(),

次はデータ非同期読み込みと更新です。
以下のコードは地元のjsonタイプです。非同期でデータをロードする場合はデータを記入し、seriesで名前に応じてシリーズに対応すればいいです。

   getOrderTotal(){//            

   api.getOrderStatistical(this.begin, this.end,this.kId)

   .then(res => {

    if (res.data.ok && res.data.r.length) {

 

     const

      results = res.data.r, 

      legends = results.map(item => ({

       name: item.channelName,

       data: item.dateStatisticals

      }))

     

     this.lineChartOrder.setOption({

      title: {

       text: '    '

      },

      legend: {

       data: legends.map(item => item.name)

      },

 

      xAxis: {

       data: legends[0].data.map(item => item.date)

      },

 

      series: legends.map(item => {

       return {

        type: 'line',

        name: item.name,

        data: item.data.map(item => item.count)

       }

      })

     })

    }

   }).catch(err => {

    // console.log(err)

   })

しかし、echartsのデータは直接mergeのものですので、複数の折れ線が発生した場合、当日のデータが0だったり、バックグラウンドから届いたデータが空だったりすると、setOptionの値はまったく更新されず、直接mergeになってしまうので、この問題は頭が大きいです。
この問題に対する解決方法は
getOptionで既存のオプトモーションを取って、this.lineChartOrder.setOption.clear()を使って、最後にはthis.lineChartOrder.setOption(option, false, false)をクリアします。
これで掃除できます。
以下は公式サイトの非同期データの読み込みと更新の方法です。比較的簡単です。

//       

 $.get('data.json').done(function (data) {

//     

 

myChart.setOption({

 

 xAxis: {

  data: data.categories

 },

 series: [{

  //             

  name: '  ',

  data: data.data

 }]

});

データを入力するだけでいいです。
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。