微信小程序开发服务_在vue中通过axios异步使用echarts的方法

在vue中通过axios异步使用echarts的方法       本篇文章主要介绍了在vue中通过axios异步使用echarts的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将中的数据提取出来, 放入到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中请求数据

从aysnc-barChart-option.js中引入option 在methods中添加drawBarChart()方法 在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 

二. 添加加载动画

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

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


相关阅读