axios vue 加载效果动画_vue中Echarts如何使用axios动态获取数据

由于疫情的原因可能很多小伙伴还是在家办公，当然小编也一样，在家办公。正好今天在做公司项目时用到了Echarts，写demo的时候我们在用静态数据可能大家都会，但是如果和后端交互，通过axios动态加载数据有些新人小伙伴可能一时不知如何下手，所以特意整理一篇自己的笔记，为大家提供帮助，推荐大家阅读我之前的一篇文章《如何在 Vue 项目中使用百度Echarts.js》

好了，废话不多说，直接上代码。

首先准备一个容器

在当前的页面中使用axios，可以全局引用也可以在当前页面调用。

引入放在本地在static文件中的静态文件options.js

引入echarts

import axios from 'axios';

将数据格式放在js文件中 等会将他暴露出去

import {option} from '../../../static/options.js'

引入echarts模块

let echarts = require('echarts');

options.js文件是Echarts配置的相关参数，代码如下：

export const option = {

title: {

text: '数据处理统计',

subtext: '虚构数据',

left: 'center'

},

tooltip: {

trigger: 'item',

formatter: '{a}

{b