快捷導航

在vue中使用Echarts畫曲線圖的示例

更新時間：2020年10月03日 10:29:44 作者：guo&qi

這篇文章主要介紹了在vue中使用Echarts畫曲線圖的示例，幫助大家在vue中繪制圖表，感興趣的朋友可以了解下

現(xiàn)實的工作中, 數(shù)據(jù)不可能寫死的，所有的數(shù)據(jù)都應(yīng)該通過發(fā)送請求進行獲取。
所以本項目的需求是請求服務(wù)器獲得二維數(shù)組，并生成曲線圖。曲線圖的橫縱坐標均從獲得的數(shù)據(jù)中取得。
Echarts官方文檔：

https://ecomfe.github.io/echarts-doc/public/en/index.html

前端框架使用vue，服務(wù)器使用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)

二.設(shè)置aysnc-lineChart-option.js

　　將該曲線圖的沒有數(shù)據(jù)的option抽取到async-lineChart-option.js中。

　　此代碼在src/echarts/aysnc-lineChart-option.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中請求數(shù)據(jù)

　 1.從async-lineChart-option.js中引入option

　　2.在methods中添加drawLineChart()方法

　　3.在mounted()鉤子函數(shù)中調(diào)用drawBarChart()

　　4.添加加載動畫，在drawLineChart()方法中添加showLoading()和hideLoading()

　　此代碼在src/views/Curve.vue中，代碼如下：

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

  export default {
    name: 'Curve',

    mounted() {
      //調(diào)用drawLineChart()
      this.drawLineChart();
    },
    data () {
      return {

      }
    },
    methods:{　　　　　　drawLineChart() {
        // 基于準備好的dom，初始化echarts實例
        var myChart = this.$echarts.init(document.getElementById('myChart'));
        // 繪制基本圖表
        myChart.setOption(option);

        //顯示加載動畫
        myChart.showLoading();

        //獲取數(shù)據(jù)
        this.$axios.get('/getdate').then(res => {

          //將json對象的所有id數(shù)據(jù)組成一個數(shù)組
          var id = [];
          for(let i = 0;i < res.data.length;i++){
            id.push(res.data[i].id);
          }

          //將json對象中的所有data數(shù)據(jù)組成一個數(shù)組
          var data = [];
          for(let i = 0;i < res.data.length;i++){
            data.push(res.data[i].data);
          }

          setTimeout(()=>{ //為了讓加載動畫效果明顯,這里加入了setTimeout,實現(xiàn)300ms延時
            myChart.hideLoading(); //隱藏加載動畫
            myChart.setOption({
              xAxis: {
                data: id
              },
              series: [{
                 data: data
              }]
            })
          }, 300 )
        })
      },
    },

  };


</script>

四.效果圖