jfinal 创建柱状图
链接网址:https://www.echartsjs.com/tutorial.html#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD%E5%92%8C%E6%9B%B4%E6%96%B0
链接网址:https://jingyan.baidu.com/article/5d368d1eae59eb3f61c05772.html
后端代码 ,service层:
1 public class IndexAdminService { 2 3 // 柱状图 4 public Ret getAccountCount(){ 5 Ret ret = Ret.by("title" , "拥有人数") ; 6 Integer cot = Db.queryInt("select count(*) from account"); 7 ret.set("cot" , cot) ; 8 return ret ; 9 } 10 11 public Ret getProjectCount(){ 12 Ret ret = Ret.by("title" , "总项目数") ; 13 Integer cot = Db.queryInt("select count(*) from project"); 14 ret.set("cot" , cot) ; 15 return ret ; 16 } 17 18 public Ret getShareCount(){ 19 Ret ret = Ret.by("title" , "总分享数") ; 20 Integer cot = Db.queryInt("Select count(*) from share"); 21 ret.set("cot" , cot) ; 22 return ret ; 23 } 24 25 public Ret getFeedbackCount(){ 26 Ret ret = Ret.by("title" , "总反馈数") ; 27 Integer cot = Db.queryInt("select count(*) from feedback"); 28 ret.set("cot" , cot) ; 29 return ret ; 30 } 31 32 public Ret getPermissionCount(){ 33 Ret ret = Ret.by("title" , "总权限数") ; 34 Integer cot = Db.queryInt("select count(*) from permission"); 35 ret.set("cot" , cot) ; 36 return ret ; 37 } 38 39 }
controller
1 public class IndexAdminController extends BaseController { 2 3 @Inject 4 IndexAdminService srv; 5 6 public void setMap(){ 7 String names[] = { 8 srv.getAccountCount().getStr("title") , 9 srv.getProjectCount().getStr("title") , 10 srv.getShareCount().getStr("title") , 11 srv.getFeedbackCount().getStr("title") , 12 srv.getPermissionCount().getStr("title") 13 } ; 14 15 int data[] = {srv.getAccountCount().getInt("cot") , 16 srv.getProjectCount().getInt("cot") , 17 srv.getShareCount().getInt("cot") , 18 srv.getFeedbackCount().getInt("cot") , 19 srv.getPermissionCount().getInt("cot") , 20 21 } ; 22 23 Map<String , Object> map = new HashMap<String , Object>() ; 24 25 map.put("name" , names) ; 26 27 map.put("data" , data) ; 28 29 String result = JsonKit.toJson(map) ; 30 31 renderText(result); 32 } 33 }
前端 代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ECharts</title> 6 <!-- 引入 echarts.js --> 7 <script src="echarts-en.common.js"></script> 8 </head> 9 <body> 10 <!-- 为ECharts准备一个具备大小(宽高)的Dom --> 11 <div id="main" style="width: 570px;height:245px;margin: 38px 200px 0 1140px"></div> 12 <script type="text/javascript"> 13 // 基于准备好的dom,初始化echarts实例 14 var myChart = echarts.init(document.getElementById('main')); 15 // 显示标题,图例和空的坐标轴 16 myChart.setOption({ 17 title: { 18 text: '人数分类统计', 19 backgroundColor: '#ecccff', //背景 20 subtext: '按人数分类', //子标题 21 22 textStyle: { 23 fontWeight: 'normal', //标题颜色 24 color: '#ffa66d' 25 }, 26 27 x:"center" 28 }, 29 tooltip: {}, 30 // legend: { 31 // data:['人数'] 32 // }, 33 xAxis: { 34 data: [], 35 axisLabel: { 36 show: true, 37 textStyle: { 38 color: '#dd84ff', //更改坐标轴文字颜色 39 fontSize : 7 //更改坐标轴文字大小 40 } 41 }, 42 }, 43 yAxis: {}, 44 series: [{ 45 name: '人数', 46 type: 'bar', 47 data: [], 48 49 // itemStyle: { 50 // normal: { 51 // color: new echarts.graphic.LinearGradient(0,0,0,1,[ 52 // {offset: 0, color: '#d152e9'}, 53 // {offset: 1, color: '#7762e7'} 54 // ]) 55 // } 56 // } 57 itemStyle: { 58 normal: { 59 //每根柱子颜色设置 60 color: function(params) { 61 let colorList = [ 62 "#c23531", 63 "#2f4554", 64 "#61a0a8", 65 "#d48265", 66 "#91c7ae", 67 "#749f83", 68 "#ca8622", 69 "#bda29a", 70 "#6e7074", 71 "#546570", 72 "#c4ccd3", 73 "#4BABDE", 74 "#FFDE76", 75 "#E43C59", 76 "#37A2DA" 77 ]; 78 return colorList[params.dataIndex]; 79 } 80 } 81 } 82 }], 83 barWidth : 40 84 }); 85 86 // 异步加载数据 87 $.ajax({ 88 url:"/admin/setMap", 89 async:false, 90 cache:false, 91 dataType: 'json' , 92 success:function (data) { 93 myChart.setOption({ 94 xAxis: {data: data.name}, 95 series: [{name: '人数' , data: data.data}] 96 }) 97 }, 98 error:function(error){ 99 console.log(error) ; 100 } 101 }) 102 103 // 使用刚指定的配置项和数据显示图表。 104 myChart.setOption(option); 105 </script> 106 </body> 107 </html>