从零开始的课程设计项目准备——在Vue中运用Echarts并从数据库中获取数据输出

2.17-2.23自学笔记——Echarts从数据库中获取数据

本文章仅记录自学进度及笔记，不用于任何商业用途，如有侵权请联系作者，作者将第一时间对相应内容进行删除。

花了三天把上课的代码运行出来了（大部分时间在划水），如果是直接克隆的老师的代码，需要修改的地方就三处：
1.后端adusercontroller一句

@CrossOrigin(origins = {"http://localhost:8081"},allowCredentials="true")

2.前端service中config.js的

export var server_url = "http://localhost:8080/api-user"

和views中的一句

action="http://localhost:8080/api-user/upload"

3.记得把数据库中的user_id这个主键设为自增长，不然在添加用户的时候会报500的错误。

下面开始操作Echarts与数据库，今天只实现拿到数据

1.建表，先随便填了

2.插入几条数据用于测试

3.先整后端的代码
建立新的player模块，复制代码并对对象进行简单的替换操作

4.接着整前端代码

5.通过复制能拿到数据库中player的数据

6.安装echarts：

npm install echarts@4.9.0

把上一节的代码引入：

option : {
	  title:{
		text:'球员数据表'
			 },
				  color: ['#f44'],
				  tooltip : {
				    trigger: 'axis',
				    axisPointer : {
				      type : 'shadow'
				    }
				  },
				  xAxis : [
				    {
				      type : 'category',
				      data : [],
				      axisTick: {
				        alignWithLabel: true
				      }
				    }
				  ],
				  yAxis : [
				    {
				      type : 'value'
				    }
				  ],
				  series : [
				    {
				      name:'力量',
								color: ['#f44'],
				      type:'bar',
				      barWidth: '15%',
				      data:[]
				    },
							  {
							    name:'敏捷',
								color: ['#33ff33'],
							    type:'bar',
							    barWidth: '15%',
							    data:[]
							  },
							  {
							    name:'智力',
								color: ['#0000ff'],
							    type:'bar',
							    barWidth: '15%',
							    data:[]
							  }
				  ]
				}

前端引入数据库数据：

			initEcharts(){
			      this.myChart = echarts.init(document.getElementById('chart_example'));
			      this.myChart.setOption(this.option);
			    },
			getPlayerList(player){
				var token = sessionStorage.token;
				listPlayers(token,player).then(res=>{
					if(res.code==200){
						this.page = res.data;
						var xnames = this.page.list && this.page.list.map(function(player1){
		  					return player1.playername;
		  				});
						var pstrength = this.page.list && this.page.list.map(function(player1){
							return player1.strength;
						});
						var pspeed = this.page.list && this.page.list.map(function(player1){
							return player1.speed;
						});
						var pwise = this.page.list && this.page.list.map(function(player1){
							return player1.wise;
						});
						// this.option.xAxis.data = xnames;
						// console.log(this.option)
						// this.myChart.setOption(this.option)
						this.myChart.setOption({
							xAxis: {
								data: xnames
							},
							series : [
							  {
							    data:pstrength
							  },
							  {
							    data:pspeed
							  },
							  {
							    data:pwise
							  },
							]
						});
						this.loading = false;
					}else{
						this.$message.error(res.msg);
					}
				})
			},

最后得出

标签：课程设计,Vue,type,list,获取数据,player1,var,data,page
来源： https://blog.csdn.net/weixin_43985267/article/details/113873819