jfinal 创建柱状图

最新推荐文章于 2024-08-11 22:22:51 发布

angelica2014

最新推荐文章于 2024-08-11 22:22:51 发布

阅读量104

点赞数

文章标签：前端后端 javascript ViewUI

原文链接：http://www.cnblogs.com/fanxu3/p/11220528.html

版权

链接网址：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>

转载于:https://www.cnblogs.com/fanxu3/p/11220528.html

angelica2014

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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.htm...
复制链接

扫一扫