vue引入axios并封装

一、npm引入axios

npm install axios

二、全局引入在main.js

import axios from 'axios'

三、封装接口

import axios from "axios" //引入axios
const baseurl = 'http://192.168.0.4:8085/' //基础请求的端口和IP，方便后期发生改变后更改
//const baseurl = 'http://10.9.44.131:8085/' //基础请求的端口和IP，方便后期发生改变后更改

function get(_url, _params) { //传入的参数
	return new Promise((resolve, reject) => { //异步调用 async+await
		axios(baseurl + _url, {
			params: _params || {} //请求的传送的数据
		}).then(res => {
			if (res.status === 200) {
				resolve(res.data) //返回得到的数据
			}
		}).catch(err => {
			reject(err) //返回错误
		})
	})
}

export default get

四、使用API

<template>
	<div class="app">
		<!--饼图-->
		<div style="width:500px;height:500px" ref="chart"></div>
	</div>
</template>
<script>
	const echarts = require('echarts');
	export default {
		data() {
			return {
				data: []
			}
		},
		async created() {
			const res = await this.$axiosget('get', {
				sentence: `select top 5 driverName as name,COUNT(*) as value from PieChart group by driverName order by value desc`
			})
			this.data = res;
			this.initCharts();
		},
		methods: {
			initCharts() {
				let myChart = echarts.init(this.$refs.chart);
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'item'
					},
					title: {
						text: '接单分析',
						subtext: 'Order-taking analysis',
						left: 'center'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: '个人总接单数量(个)',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: this.data
					}]
				})
			}
		}
	}
</script>

五、效果图