Controller页面
这里只写一个controller层的,其他的就不写了,就是查询全服的,自己写
后端使用ModelMap传值到前端,和下拉框的默认选中一样
@RequiresPermissions("system:score:view") @GetMapping() public String score(HttpServletRequest request,ModelMap mmap) { // System.out.println("111111111111"); // System.out.println(request.getParameter("a")); // System.out.println(request.getParameter("b")); // mmap.put("a",request.getParameter("a")); // mmap.put("b",request.getParameter("b")); //通过这里传值到前端 mmap.put("list",sysScoreService.selectSysScoreList(new SysScore())); //跳转HTML页面,附带传值 return prefix + "/score"; }
HTML页面
首先需要引入js模板—head里面
<!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
定义div进行存储–body里面
<div class="col-sm-12 search-collapse" id="main" style="width: 1000px;height:400px;"></div><!--柱状图--> <div class="col-sm-12 search-collapse" id="main1" style="width: 1000px;height:400px;"></div><!--饼状图-->
然后再用js进行定义属性
//默认选中div,进行设置属性的 var myChart = echarts.init(document.getElementById('main')); var myChart1 = echarts.init(document.getElementById('main1')); var option = {//柱状图 title: { text: '成绩柱状图', }, tooltip: {}, legend: { data:['成绩'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '成绩', type: 'bar', data: [] }] }; //清空原本的数据,不清空怎么往里面赋值,不清空就是替换覆盖了,会有buf option.xAxis.data=[]; option.series[0].data=[]; //后端取值进行循环===》》》[[${list}]] for (var i = 0;i<[[${list}]].length;i++){ option.xAxis.data[i]=[[${list}]][i].sysStudent.studentName+[[${list}]][i].sysSub.subName; option.series[0].data[i]=[[${list}]][i].scoreName; } //打印图形 myChart.setOption(option); var option1 ={//饼图 series : [ { name: '分数', type: 'pie', // 设置图表类型为饼图 radius: '55%', // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。 data:[ // 数据数组,name 为数据项名称,value 为数据项值 {value:235, name:'视频广告'}, {value:274, name:'联盟广告'}, {value:310, name:'邮件营销'}, {value:335, name:'直接访问'}, {value:400, name:'搜索引擎'} ] } ] }; //清空原本的数据 option1.series[0].data=[]; //后端取值进行循环===》》》[[${list}]] for (var i = 0;i<[[${list}]].length;i++){ //定义集合进行存储数据,循环一次,赋值一次,清空一次 var info={}; info.value=[[${list}]][i].scoreName; info.name=[[${list}]][i].sysStudent.studentName+[[${list}]][i].sysSub.subName; //这里才是真正的赋值 option1.series[0].data[i]=info; } myChart1.setOption(option1);