【食堂管理项目记录】Echarts的使用

最新推荐文章于 2023-08-02 12:38:27 发布

不辞阳春

最新推荐文章于 2023-08-02 12:38:27 发布

阅读量476

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/fascy/article/details/79689194

版权

Java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这回做图表分析的时候发现了一个比较好看也好用的，一个使用 JavaScript 实现的开源可视化库ECharts

他的网站：http://echarts.baidu.com/

下载：http://echarts.baidu.com/download.html

我一般要好看的话就直接下他的完整版了。

用它来实现食堂的数据分析。

日期查询的组件用的是layui的日期选择器。

<%@ page language="java" import="java.sql.*,java.io.*,java.util.*,model.Cafe" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <link rel="stylesheet" href="./layui/css/layui.css"/>
     <script src="./layui/layui.js"></script>
 		<script src="./js/echarts.min.js"></script>
    <title></title>
</head>
<body style="width:1080px;">
<div style="margin-top:30px;margin-left:250px;margin-right:50px;">
	<form method="post" action="CafeChartServlet">
	<div class="layui-inline">
      	<label class="layui-form-label">查询日期</label>
      	<div class="layui-input-inline">
        	<input type="text" class="layui-input" id="test1" name="test1" placeholder="yyyy-MM-dd">
      	</div>
    </div>
    <script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  laydate.render({
    elem: '#test1'
  });
});
</script>
<div class="layui-inline">
	<div calss="layui-input" style="margin-left:30px;">
	    <input  type="submit" class="layui-btn layui-btn-normal" value="查询">
	    </div>
	    <script type="text/javascript">
	    function btnSubmitForm(o) {
	        
	    }
	    </script>
	</div>
	</form>
	</div>
		<hr/>
<%
	request.setCharacterEncoding("UTF-8");
	ArrayList<Cafe> cafelist = (ArrayList)request.getAttribute("cafelist");	
%>
 <script type="text/javascript">
 var list=[];//大的集合
   //集合对象
 <%
 if(cafelist!=null){
 for(int i=0;i<cafelist.size();i++){  
	 Cafe cafe=(Cafe)cafelist.get(i);
	 %>   
	 var obj = new Object();
	 obj.name= "<%=cafe.getCafe()%> "; 
	 obj.value= "<%=cafe.getAmount()%> "; 
	 list.push(obj); 
<%   }}     %>

	
	</script>
	
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;padding-left:200px;padding-top:50px"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

	option = {
    backgroundColor: '#2c343c',

    title: {
        text: '各食堂营业额分布',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 0,
        max: 300,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series : [
        {
            name:'食堂',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:list.sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
  <input type="text" class="layui-input" id="test1">

 
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test1' //指定元素
  });
});
</script>
</body>
</html>

基本上就是照着官网上的教程扒下来的，后台用一个servlet来实现数据查询，然后返回一个ArrayList就可以了