vueではEchartsを使って曲線図を描く例

現実の仕事では、データは書き殺すことができません。すべてのデータは送信要求によって取得するべきです。
したがって、本プロジェクトの必要性は、二次元配列を要求サーバに要求し、曲線図を生成することである。グラフの縦軸は、得られたデータから取得されます。
Echarts公式文書:
https://ecomfe.github.io/echarts-doc/public/en/index.html
フロントフレームはvueを使い、サーバーはexpressを使って構築し、相互にaxiosを使う。
一.vue-resourceを導入する
npmでvue-resourceをダウンロードします。

npm install vue-resource --save

main.jsにvue-resourceを導入して登録します。

// main.js

import VueResource from 'vue-resource' 
Vue.use(VueResource)

二.aysnc-line Chart-options.jsを設定する
このグラフのデータのないoptionをasync-lineart-options.jsに抽出します。
このコードはsrc/echart/ aysnc-line Chart-options.jsファイルの中で、コードは以下の通りです。

export const option = {
  title: { text: '   ' },
  backgroundColor: '#FBFBFB',
  tooltip: {
    trigger:'axis'
  },
  xAxis: {
    data: [],
    name: 'id'
  },
  yAxis: {},
  series: [{
    name: 'data',
    type: 'line',
    data: [],
    smooth : true,
    itemStyle: {
      normal: {
        color: 'hotpink'
      }
    }
  }]
}

三.Curve.vueでデータを要求する
　   1.async-line Chart-options.jsからoptionを導入する
2.methodsにdrawLine Chartを追加する方法
3.mounted()フック関数でdrawBarChart()を呼び出します。
4.ロード動画を追加して、drawLine Chart（）方法にショーLoading（）とhideLoading（）を追加します。
このコードはsrc/view/Curve.vueにあります。コードは以下の通りです。

<script>
  import {option} from '../echarts/aysnc-lineChart-option.js' // aysnc-lineChart-option.js   option

  export default {
    name: 'Curve',

    mounted() {
      //  drawLineChart()
      this.drawLineChart();
    },
    data () {
      return {

      }
    },
    methods:{　　　　　　drawLineChart() {
        //       dom，   echarts  
        var myChart = this.$echarts.init(document.getElementById('myChart'));
        //       
        myChart.setOption(option);

        //      
        myChart.showLoading();

        //    
        this.$axios.get('/getdate').then(res => {

          // json     id        
          var id = [];
          for(let i = 0;i < res.data.length;i++){
            id.push(res.data[i].id);
          }

          // json      data        
          var data = [];
          for(let i = 0;i < res.data.length;i++){
            data.push(res.data[i].data);
          }

          setTimeout(()=>{ //           ,     setTimeout,  300ms  
            myChart.hideLoading(); //      
            myChart.setOption({
              xAxis: {
                data: id
              },
              series: [{
                 data: data
              }]
            })
          }, 300 )
        })
      },
    },

  };


</script>

四.効果図

以上はevueでEchartsを使って曲線図を描いた例の詳しい内容です。vue Echartsの曲線図に関する資料は他の関連記事に注目してください。