vue-axios和vue-Echarts

vue-axios

1、安装：
（1）.首先使用visual Ctudio Code新建一个vue项目。
（2）.打开终端在终端输入以下命令：cnpm install --save axios vue-axios

2、在main.js引用：

import axios from 'axios'
 import VueAxios from 'vue-axios'
 Vue.use(VueAxios, axios)

3、 在对应需要的的组件中写js代码：

   //用来在一个实例被创建之后执行代码
created(){
this.axios.get('api接口地址').then((response)=>{
   console.log(response);
	//通过打印输出，来看接口里面对应的数据，然后进行处理
this.syk=response.data.data;
   //syk是在data()中自定义的属性名
       console.log(this.syk);
}).catch((error)=>{
    //调用接口失败
        console.log(error)
    })
},

给你们提供一个post接口例子，如下，这个就是咱们做echarts时用的接口:

vue-Echarts

1、安装：
（还在刚才创建的项目里安装）
cnpm install echarts –-save
2、在main.js中配置：
// 引入echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、 在对应组件中写结构代码如下：

js代码：
mounted(){
    	this.drawLine();
  	},
  	methods: {
    	drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        let option={
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
       myChart.setOption(option);
    }
  	}

效果图：