欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在vue中通过axios异步使用echarts的方法

程序员文章站 2022-07-05 20:38:20
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在vue项目中使用echarts: 在...

现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在vue项目中使用echarts: 在vue中引入echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数据。

一、 实现异步加载数据

(一)引入vue-resource

通过npm下载axios

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

在main.js中引入axios并注册

// main.js
import http from './http'
vue.prototype.$http = http //挂载到原型上

(二)设置data.json

将该柱状图的没有数据的option抽取到data.json中, 代码如下:

 {
 "title": { "text": "简单饼状图" },
 "tooltip": {},
 "xaxis": {
  "data": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
  "name": "产品"
 },
 "yaxis": {},
 "series": [{
  "name": "销量",
  "type": "bar",
  "data": [5, 20, 36, 10, 10, 20],
  "itemstyle": { 
   "normal": {
    "color": "hotpink"
   }
  }
 }]
}

(三)在async-bar-chart.vue中请求数据

  1. 从aysnc-barchart-option.js中引入option
  2. 在methods中添加drawbarchart()方法
  3. 在mounted()钩子函数中调用drawbarchart()

代码如下:

<template>
 <div id="mychart" :style="{width: '800px', height: '400px'}"></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() {
  // 基于准备好的dom,初始化echarts实例
  let mychart = this.$echarts.init(document.getelementbyid('mychart'))
  // 绘制图表
  mychart.setoption({
   title: {}, //{text: '异步数据加载示例'},
   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中通过axios异步使用echarts的方法

二. 添加加载动画

如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。

echarts 默认有提供了一个简单的加载动画。只需要调用 showloading 方法显示。数据加载完成后再调用 hideloading 方法隐藏加载动画。

在drawline()方法中添加showloading()和hideloading(), 代码如下:

 methods: {
  drawline() {
  // 基于准备好的dom,初始化echarts实例
  let mychart = this.$echarts.init(document.getelementbyid('mychart'))
  // 绘制图表
  mychart.setoption({
   title: {}, //{text: '异步数据加载示例'},
   tooltip: {},
   xaxis: {
   data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
   },
   yaxis: {},
   series: [{
   name: '销量',
   type: 'bar',
   data: [] //[5, 20, 36, 10, 10, 20]
   }]
  });
  //显示加载动画
  mychart.showloading();

  this.$http.get("./static/dat.json").then((res) => {
   settimeout(() => { //未来让加载动画效果明显,这里加入了settimeout,实现3s延时
   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(); //隐藏加载动画
   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中通过axios异步使用echarts的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。