ruoyi框架：使用Echarts工具、Ajax技术实现【饼图】和【柱状图】的功能
ruoyi框架：使用Echarts工具、Ajax技术实现【饼图】和【柱状图】的功能
当我点击【饼状图】的功能键时，就会跳转到带有饼状图的界面
- 第一步在显示界面添加功能按钮【饼状图】
<a class="btn btn-warning" onclick="$.operate.echartsFull()" shiro:hasPermission="system:score:echarts">
<i class="fa fa-download"></i> 饼状图
</a>
- echartsFull()方法作用是：当我点击【饼状图】的按钮时，就会触发向后端控制器请求跳转界面的命令。
echartsFull: function() {
table.set();
var url = table.options.echartUrl;
$.modal.openFull("图" + table.options.modalName, url);
},
下边就是像后端请求地路径
echartUrl: prefix + "/echarts",
- 后端控制器，接收前端传过来的指令，向指定的界面跳转
/*跳转到指定的界面echart*/
@GetMapping("/echarts")
public String echarts()
{
return prefix + "/echart";
}
- echart.html
DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('新增【请填写功能名称】')" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js">script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript">script>
head>
<body class="white-bg">
<div id="main" style="width: 400px;height:300px;">div>
<div id="main2" style="width: 400px;height:300px;">div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
var prefix=ctx+"system/score";
var pie=[]; //柱状图数据
var column=[];
var studentName=[]; //学生姓名
var chinese=[]; //语文成绩
var math=[]; //数学成绩
var english=[]; //英语成绩
var courseName=[]; //科目信息
$.ajax({
url: prefix+"/getDate", //向后端请求数据
dataType: 'json',
type: 'post',
success:function (data) {
// alert(JSON.stringify(data));
pie = [];
var len = data.length;
for (var i = 0; i < len; i++) {
var info = {};
info.name = data[i].student.studentName;
info.value = data[i].sum;
pie.push(info);
studentName.push(data[i].student.studentName);
chinese.push(data[i].chinese);
math.push(data[i].math);
english.push(data[i].english);
}
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series: [
{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data: pie,
}
]
});
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main2"));
option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['语文', '数学', '英语']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: studentName,
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '语文',
type: 'bar',
barGap: 0,
data: chinese,
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值',symbol:'arrow'}
]
},
markLine:{
data:[
{type: 'average',name:'平均值'}
]
}
},
{
name: '数学',
type: 'bar',
data: math,
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值',symbol:'arrow'}
]
},
markLine:{
data:[
{type: 'average',name:'平均值'}
]
}
},
{
name: '英语',
type: 'bar',
data: english,
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值',symbol:'arrow'}
]
},
markLine:{
data:[
{type: 'average',name:'平均值'}
]
}
},
]
};
myChart.setOption(option);
}
})
script>
body>
html>
- Controller
@PostMapping("/getDate")
@ResponseBody
public List<SysScore> getDate(){
List<SysScore>list=sysScoreService.selectAll();
return list;
}
- 再次请求后端控制器，接收数据
- 最后我们看下效果
这个方式表达可能不是最好的，性能上还不是很好，打开的有些慢，原因是加载地东西有些多影响用户体验，望哪位大神给指点指点