一.简介
1.ECharts: 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。
二.编程步骤
1.环境配置
2.后端传数据
3.数据绑定,实现数据可视化
三,实际操作
1.环境配置
下载
npm i echarts -S
引入
//全局的
import * as echarts from 'echarts';
//或者
const echarts = require('echarts');
2.后端传数据
通过axios请求数据,并绑定tableDate
created() {
const _this = this;
axios.get('http://localhost:8181/GradeFindPageTwo').then(function (resp){
console.log(resp.data)
_this.tableData = resp.data.tableData;
//_this.total = resp.data.total
})
},
data() {
return {
xs:"学生",
tableData: [{
courseId: 'teacher',
homeworkId: '0',
grade: '100',
email : 'e'
}
]
}
}
3.数据绑定,实现数据可视化
前端完整代码,这里用了Element Ui,initCharts()这个方法实现数据的绑定和图标的展示
<template>
<div>
<el-table
:data="tableData"
border
style="width: 50%">
<el-table-column
fixed
prop="homeworkId"
label="作业号"
width="150">
</el-table-column>
<el-table-column
prop="grade"
label="成绩"
width="220">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="initCharts" type="text" size="small">查看</el-button>
</template>
</el-table-column>
</el-table>
<div style="width:500px;height:500px" ref="chart"></div>
<button @click="initCharts">图表</button>
</div>
</template>
<script>
const echarts = require('echarts');
export default {
methods: {
initCharts(){
let echartsETCB=this.tableData
let echartsX=[]
let echartsY=[]
for ( let i=0;i<echartsETCB.length;i++) { //循环遍历出后台返回的数据在分别赋值
echartsX.push(echartsETCB[i].homeworkId)
echartsY.push(echartsETCB[i].grade)
}
//console.log("这里是数据的长度"+echartsETCB+"这里"+this.tableData.length)
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(this.$refs.chart);
// 绘制图表
myChart.setOption({
title: { text: '我的成绩' },
tooltip: {},
xAxis: {
name : '作业号',
data: echartsX
},
yAxis: {},
series: [{
name: '成绩',
type: 'bar',
data: echartsY
}]
});
}
//page(currentPage){
//alert('http://localhost:8181/findPage?p='+currentPage+'&d=5');
//const _this = this;
// axios.get('http://localhost:8181/findPage?p='+currentPage+'&d=5').then(function (resp){
// console.log(resp.data)
// _this.tableData = resp.data.tableData
// _this.total = resp.data.total
// }
//)
//}
,check(row) {
},goto_edit(row){
// console.log(this.tableData)
}
},
created() {
const _this = this;
axios.get('http://localhost:8181/GradeFindPageTwo').then(function (resp){
console.log(resp.data)
_this.tableData = resp.data.tableData;
//_this.total = resp.data.total
})
},
data() {
return {
xs:"学生",
tableData: [{
courseId: 'teacher',
homeworkId: '0',
grade: '100',
email : 'e'
}
]
}
},
mounted() {
// const _this=this;
// this.initCharts(_this.tableData);
}
}
</script>