施坤的博客
0%

vue+axios+echarts

发表于 分类于 阅读次数： Valine：

说明

  • 最近再做接口测试平台的报表功能，直接再网上搜下简单的demo，居然没有找到合适的，最后自己写了个简单的入门demo

环境搭建

  • vue环境自行搭建
  • 安装echarts
1
npm install echarts --save
  • 安装axios
1
npm install axios
  • main.js设置下
1
2
3
4
5
6
7
import Vue from "vue"
import axios from 'axios'

// 设置接口访问的根目录
axios.defaults.baseURL = "http://127.0.0.1:8100/myapi/"
// 设置原型属性后,其他地方如果要调用，只要用this.$http.get就可以了
Vue.prototype.$http = axios
  • 完整vue代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div id="echarts_box" style="width: 600px;height:400px;">
        
</div>
<script>
    var echarts = require('echarts');

  export default {
    data() {
      return {
      }
    },
    mounted() {
      this.drawLine();
    },
    created() {
     
    },
    methods: {
      async drawLine() {
           const {data:res}  = await this.$http.get('reports')
            if (res.code != 1){
                return this.$message.erro("获取数据失败")
            }
            console.log(res)
          // 初始化echarts实例
          let myChart = echarts.init(document.getElementById('echarts_box'))
          myChart.setOption({
    	  	title: {text: res.data.title.text},
          	tooltip: {},
  		  	xAxis: {data: res.data.xAxis.data},
  		  	yAxis: {},
  		  	series: [{name: res.data.series[0].name,type: res.data.series[0].type,
      				data: res.data.series[0].data}]
			});
      }
    }
  }
</script>
  • 后台接口返回的json数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
	"code": 1,
	"msg": "获取成功",
	"data": {
		"title": {
			"text": "简单饼状图"
		},
		"tooltip": {},
		"xAxis": {
			"data": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
			"name": "产品"
		},
		"yAxis": {},
		"series": [{
			"name": "销量",
			"type": "bar",
			"data": [5, 20, 36, 10, 10, 20],
		}]
	}
}
  • 效果图如下

image-20220308090809791