本篇文章主要介绍了在vue中通过axios异步使用echarts的方法，现在分享给大家，也给大家做个参考。

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

一、 实现异步加载数据

(一)引入vue-resource

通过npm下载axios

立即学习“前端免费学习笔记（深入）”；

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

在main.js中引入axios并注册

// main.jsimport 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> <p id="myChart" :style="{width: &#39;800px&#39;, height: &#39;400px&#39;}"></p></template><ｓｃｒｉｐｔ> export default { name: &#39;echarts&#39;, data() {  return {  msg: &#39;Welcome to Your Vue.js App&#39;,  goods: {}  } }, mounted() {  this.drawLine(); }, created() {  this.$http.get(&#39;./static/dat.json&#39;).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(&#39;myChart&#39;))  // 绘制图表  myChart.setOption({   title: {}, //{text: &#39;异步数据加载示例&#39;},   tooltip: {},   xAxis: {   data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]   },   yAxis: {},   series: [{   name: &#39;销量&#39;,   type: &#39;bar&#39;,   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: &#39;销量&#39;,    type: &#39;bar&#39;,    data: Array.from(...list) //[5, 20, 36, 10, 10, 20]    }]   });   })  } } }</ｓｃｒｉｐｔ>

二. 添加加载动画

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 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)  })  } }

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

React-native桥接Android如何实现，具体步骤又是什么？

在vue中如何开发自定义指令directive

移动web开发中有关touch事件（详细教程）

详细解读layui父子窗口如何传递参数

在微信小程序中如何实现image组件图片自适应显示

标签： vue.js菜鸟教程