1. 执行命令
npm install --save axios
安装完成后配置main.js
import axios from ‘axios‘
Vue.prototype.$ajax = axios
index.vue 中使用
完整代码如下：
<template>
<div>
<div id=‘mainpie‘ style=‘width: 600px;height:400px;‘></div>
<div id=‘mainapp‘></div>
</div>
</template>
<script>
import axios from ‘axios‘;
export default {
name: ‘index‘,
data() {
return {};
},
methods: {
drawpie() {
var myChart = this.$echarts.init(document.getElementById(‘mainpie‘));
myChart.setOption({
title: {
text: ‘异步数据加载示例‘
},
tooltip: {},
legend: {
data: [‘销量‘]
},
xAxis: {
data: []
},
yAxis: {},
series: [
{
name: ‘销量‘,
type: ‘bar‘,
data: []
}
]
});
$.ajax({
type: ‘GET‘,
url: ‘/api/data‘,
dataType: ‘json‘,
success: function(data) {
debugger;
myChart.setOption({
xAxis: {
data: data.data.categories
},
series: [
{
name: ‘销量‘,
data: data.data.data
}
]
});
}
});
},
getData: function() {
var url = ‘https://cnodejs.org/api/v1/topics‘;
var that = this;
axios.get(url).then(function(result) {
debugger;
console.log(result.data.data);
that.goodlist = result.data.data;
});
}
},
mounted() {
this.drawpie();
this.getData();
}
};
</script>
main.js如下：
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘
import echarts from ‘echarts‘
import jquery from ‘jquery‘
import axios from ‘axios‘
Vue.prototype.$echarts = echarts
Vue.prototype.$ = jquery
Vue.prototype.$ajax = axios
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
router,
render: h => h(App)
})