221801232_hjq_个人技术总结随笔
个人技术总结
| 这个作业属于哪个课程 | 2021春软件工程实践S班 |
|---|---|
| 这个作业要求在哪里 | 作业要求 |
| 这个作业的目标 | 课程回顾与总结、个人技术总结 |
| 其他参考文献 | 百度、github、CSDN |
课程回顾与总结
技术概述
在vue中引入echart及echart整体图形大小调整
使用图表展示数据，可以让数据看起来更加的直观，通过饼图或者直方图折线，能展示出数据的趋势。
技术的原因：为了能够让老师直观地看到学生成绩的分布情况，能让老师更好地了解到学生作业成绩和期末考试成绩。echart整体图形大小调整通过在series里面，通过改变radius和center的大小值就可以调整大小。
技术的难点：总会有不知道什么原因显示不出饼状图来。
技术详述
一、安装echart和axios
首先要先安装能够引入echart图表和通过axios获取后端数据的依赖
npm install echarts -S
npm install axios
二、全局引入echarts和axios
import echarts from 'echarts'
import axios from 'axios'
三、数据格式
data() {
return {
options: [],
value: '',
list: [],
a:'',
b:'',
c:'',
d:'',
e:'',
f:'',
g:'',
}
}
四、创建图表
创建容器
<div id="main"></div>
导入
import echarts from 'echarts'
发送请求方法
selectChange() {
localStorage.setItem('clazzvalue', this.value)
this.initChart();
},
initChart() {
this.char=echarts.init(document.getElementById("main"));
this.char.setOption({
tooltip:{},
series:[
{
name: '访问来源',
type: 'pie',
radius: '80%',
data: []
}
]
});
this.$axios.get(```'http://1.15.149.222:8080/coursewebsite/teacher/score/final?cid='+localStorage.getItem('clazzvalue')```).then((res)=>{
console.log('访问后台');
var list = [{'name': '100', 'value':res.data.data.a},
{'name': '90-99', 'value':res.data.data.b},
{'name': '85-89', 'value':res.data.data.c},
{'name': '80-84', 'value':res.data.data.d},
{'name': '70-79', 'value':res.data.data.e},
{'name': '60-69', 'value':res.data.data.f},
{'name': '0-59', 'value':res.data.data.g} ];
console.log(list);
this.char.setOption({
series:[
{
name: '访问来源',
type: 'pie',
radius: '80%',
data:list//赋值
}
]
})
}
created() {
this.options = JSON.parse(localStorage.getItem('clazzInfo'))
this.value = this.options[0].id+''
if (!localStorage.getItem('clazzvalue'))
localStorage.setItem('clazzvalue', this.value)
else this.value = localStorage.getItem('clazzvalue')
this.initChart();
},
mounted: function() {
this.initChart();
},
技术使用中遇到的问题和解决过程
一开始一直出现图表加载不进去的情况，后来忘记改了什么参数就加载进去了。
总结
跟前端和图表相关的东西，网页可能因为各种各样的原因加载不出来。有可能是加载顺序，有可能是哪个部件的覆盖，也有可能是一点点细微打错变量名之类的错误。一定要很耐心地一点点去尝试。绘制图表的时候，一直运行就是空白运行就是空白，挺难受的，但最后最后图表能呈现出来的时候是让人感动的。
