在vue中通過(guò)axios異步使用echarts的方法

發(fā)布時(shí)間：2020-10-13 12:54:48 來(lái)源：腳本之家閱讀：203 作者：陽(yáng)光正好欄目：web開發(fā)

現(xiàn)實(shí)的工作中, 數(shù)據(jù)不可能是像之前的demo演示的那樣把數(shù)據(jù)寫死的. 所有的數(shù)據(jù)都應(yīng)該通過(guò)發(fā)送請(qǐng)求進(jìn)行獲取, 所以, 這篇文章, 我將在Vue項(xiàng)目中使用Echarts: 在Vue中引入Echarts中的數(shù)據(jù)提取出來(lái), 放入到static/data.json文件中,請(qǐng)求該文件獲取數(shù)據(jù)。

一、實(shí)現(xiàn)異步加載數(shù)據(jù)

(一)引入vue-resource

通過(guò)npm下載axios

//命令行中輸入
npm install axios --save

在main.js中引入axios并注冊(cè)

// main.js
import http from './http'
Vue.prototype.$http = http //掛載到原型上

(二)設(shè)置data.json

將該柱狀圖的沒有數(shù)據(jù)的option抽取到data.json中, 代碼如下:

 {
 "title": { "text": "簡(jiǎn)單餅狀圖" },
 "tooltip": {},
 "xAxis": {
  "data": ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"],
  "name": "產(chǎn)品"
 },
 "yAxis": {},
 "series": [{
  "name": "銷量",
  "type": "bar",
  "data": [5, 20, 36, 10, 10, 20],
  "itemStyle": { 
   "normal": {
    "color": "hotpink"
   }
  }
 }]
}

(三)在async-bar-chart.vue中請(qǐng)求數(shù)據(jù)

從aysnc-barChart-option.js中引入option
在methods中添加drawBarChart()方法
在mounted()鉤子函數(shù)中調(diào)用drawBarChart()

代碼如下:

<template>
 <div id="myChart" :></div>
</template>

<script>
 export default {
 name: 'echarts',
 data() {
  return {
  msg: 'Welcome to Your Vue.js App',
  goods: {}
  }
 },
 mounted() {
  this.drawLine();
 },
 created() {
  this.$http.get('./static/dat.json').then(res => {
  const data = res.data;
  this.goods = data
  console.log(this.goods);
  console.log(Array.from(this.goods.xAxis.data));
  })
 },
 methods: {
  drawLine() {
  // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
  let myChart = this.$echarts.init(document.getElementById('myChart'))
  // 繪制圖表
  myChart.setOption({
   title: {}, //{text: '異步數(shù)據(jù)加載示例'},
   tooltip: {},
   xAxis: {
   data: [] //["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
   },
   yAxis: {},
   series: [{
   name: '銷量',
   type: 'bar',
   data: [] //[5, 20, 36, 10, 10, 20]
   }]
  });
  this.$http.get("./static/dat.json") .then((res) => {
   const data = res.data;
   const list = data.series.map(good=>{
     let list = good.data;
     return [...list]
    })
    console.log(list);
    console.log(Array.from(...list));
   myChart.setOption({
    title: data.title,
    xAxis: [{
    data: data.xAxis.data
    }],
    series: [{
    name: '銷量',
    type: 'bar',
    data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
    }]
   });
   })
  }
 }
 }
</script>

在vue中通過(guò)axios異步使用echarts的方法

二. 添加加載動(dòng)畫

如果數(shù)據(jù)加載時(shí)間較長(zhǎng)，一個(gè)空的坐標(biāo)軸放在畫布上也會(huì)讓用戶覺得是不是產(chǎn)生 bug 了，因此需要一個(gè) loading 的動(dòng)畫來(lái)提示用戶數(shù)據(jù)正在加載。

ECharts 默認(rèn)有提供了一個(gè)簡(jiǎn)單的加載動(dòng)畫。只需要調(diào)用 showLoading 方法顯示。數(shù)據(jù)加載完成后再調(diào)用 hideLoading 方法隱藏加載動(dòng)畫。

在drawLine()方法中添加showLoading()和hideLoading(), 代碼如下:

 methods: {
  drawLine() {
  // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
  let myChart = this.$echarts.init(document.getElementById('myChart'))
  // 繪制圖表
  myChart.setOption({
   title: {}, //{text: '異步數(shù)據(jù)加載示例'},
   tooltip: {},
   xAxis: {
   data: [] //["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
   },
   yAxis: {},
   series: [{
   name: '銷量',
   type: 'bar',
   data: [] //[5, 20, 36, 10, 10, 20]
   }]
  });
  //顯示加載動(dòng)畫
  myChart.showLoading();

  this.$http.get("./static/dat.json").then((res) => {
   setTimeout(() => { //未來(lái)讓加載動(dòng)畫效果明顯,這里加入了setTimeout,實(shí)現(xiàn)3s延時(shí)
   const data = res.data;
   const list = data.series.map(good => {
    let list = good.data;
    return [...list]
   })
   console.log(list);
   console.log(Array.from(...list));
   myChart.hideLoading(); //隱藏加載動(dòng)畫
   myChart.setOption({
    title: data.title,
    xAxis: [{
    data: data.xAxis.data
    }],
    series: [{
    name: '銷量',
    type: 'bar',
    data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
    }]
   });
   }, 3000)
  })
  }
 }

在vue中通過(guò)axios異步使用echarts的方法

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

在vue中通過(guò)axios異步使用echarts的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽