Layui与ECharts结合，用Ajax动态展示图表数据

最新推荐文章于 2024-06-07 15:43:29 发布

小彩虹冲鸭

最新推荐文章于 2024-06-07 15:43:29 发布

阅读量6.2k

点赞数 14

分类专栏： # Layui 文章标签： ECharts Ajax Layui

本文链接：https://blog.csdn.net/qq_25844803/article/details/111993864

版权

Layui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

后端

接口代码

使用Spring+SpringMVC+MyBatis框架，具体接口如下


    /**
     * layui 和 echart结合，展示图表
     * 
	 * 1.展示本月各个星期的销售金额--直方图
	 * 
	 * 2.展示 销售总额 vs 广告总费用--饼状图
	 * @return
	 */
	@RequestMapping("/layui/echart")
	@ResponseBody
	public Map<String, Object> learnLayuiAndEchart() {
		/**
		 * 直方图---展示每个星期的销售金额
		 */
		// 设置 周数
		List<String> sale_weekList = new ArrayList<String>();
		sale_weekList.add("第1周");
		sale_weekList.add("第2周");
		sale_weekList.add("第3周");
		sale_weekList.add("第4周");
		// 设置 每周销售金额
		List<String> sale_feeList = new ArrayList<String>();
		sale_feeList.add("1000");
		sale_feeList.add("700");
		sale_feeList.add("800");
		sale_feeList.add("1200");
		// 封装 销售数据
		Map<String, Object> sale_data = new LinkedHashMap<String, Object>();
		sale_data.put("week", sale_weekList);
		sale_data.put("fee", sale_feeList);
		
		/**
		 * 饼状图---销售总额 对比 广告总费用
		 */
		Map<String, Object> saleTotalFee = new LinkedHashMap<String, Object>();
		saleTotalFee.put("name", "销售总额");
		saleTotalFee.put("value", "3700");
		Map<String, Object> adTotalFee = new LinkedHashMap<String, Object>();
		adTotalFee.put("name", "宣传费用");
		adTotalFee.put("value", "500");
		// 封装 总额数据
		List<Map<String, Object>> feeList = new ArrayList<Map<String,Object>>();
		feeList.add(saleTotalFee);
		feeList.add(adTotalFee);
		
		// 封装 数据
		Map<String, Object> data = new LinkedHashMap<String, Object>();
		data.put("sale", sale_data);
		data.put("total", feeList);
		// 返回结果
		Map<String, Object> resMap = new LinkedHashMap<String, Object>();
		resMap.put("code", 0);
		resMap.put("data", data);
		resMap.put("msg", "成功获取到图表数据！");
		return resMap;
	}

接口效果

调用以上效果，返回的数据如下所示：

{
    "code": 0,
    "data": {
        "sale": {
            "week": [
                "第1周",
                "第2周",
                "第3周",
                "第4周"
            ],
            "fee": [
                "1000",
                "700",
                "800",
                "1200"
            ]
        },
        "total": [
            {
                "name": "销售总额",
                "value": "3700"
            },
            {
                "name": "宣传费用",
                "value": "500"
            }
        ]
    },
    "msg": "成功获取到图表数据！"
}

前端

前端代码

使用Layui和Apache ECharts结合，展示销售数据的直方图，费用比较的饼状图。
动态加载使用Ajax实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui结合echarts展示图表</title>
		<link rel="stylesheet" href="../static/css/layui.css">
	</head>
	<body>
		<!-- 月内各周_销售额 -->
		<div class="layui-card">
		    <div class="layui-card-body">
				<div id="div_sale_chart" style="width: 600px;height:400px;"></div>
		    </div>
		</div> 
		<!-- 销售额：广告费用 -->
		<div class="layui-card">
		    <div class="layui-card-body">
				<div id="div_compare_chart" style="width: 600px;height:400px;"></div>
		    </div>
		</div> 
		 
		<script type="text/javascript" src="../static/js/layui.js"></script>
		<script type="text/javascript" src="../static/js/echarts.js"></script>
		<script type="text/javascript" >
		    layui.use(['layer', 'form'], function(){
		       $ = layui.jquery;
		       var layer = layui.layer
		          ,form = layui.form ;
			// 初始化 销售额
			var saleChart = echarts.init(document.getElementById('div_sale_chart'));
			// 销售额--显示标题，图例和空的坐标轴
			saleChart.setOption({
			    title: {
			        text: '月度_销售额_直方图'
			    },
			    tooltip: {},
			    legend: {
			        data:['销售额(元)']
			    },
			    xAxis: {
			        data: []
			    },
			    yAxis: {},
			    series: [{
			        name: '销售额(元)',
			        type: 'bar',
			        data: []
			    }]
			});
			// 初始化 费用比较
			var compareChart = echarts.init(document.getElementById('div_compare_chart'));
			// 费用比较---配置相关信息
			compareChart.setOption({
				title: {
					text: '销售额/广告费_饼状图',
				},
				tooltip: {},
				legend: {
				    data:['金额(元)']
				},
				series: [{
					name: '金额(元)',
					type: 'pie',
					itemStyle: {
					    // 阴影的大小
					    shadowBlur: 200,
					    // 阴影水平方向上的偏移
					    shadowOffsetX: 0,
					    // 阴影垂直方向上的偏移
					    shadowOffsetY: 0,
					    // 阴影颜色
					    shadowColor: 'rgba(0, 0, 0, 0.2)'
					},
					// roseType: 'angle',//设置为南丁格尔图，即饼的半径不一致
					radius: '80%',
					data:[]
				}]
			});
			// 动态加载的相关数据
			$.ajax({
				url: 'http://localhost:8080/layui/echart',
				type: "post",
				async: true,//异步
				complete: function (XHR, TS) {
					if (XHR.status != 200) {
						layer.alert("系统繁忙，稍后重试");
					}
				},
				success: function (result) {
					if(result.code==0){
						//填入 销售数据
						saleChart.setOption({
							xAxis: {
								data: result.data.sale.week
							},
							series: [{
								// 根据名字对应到相应的系列
								name: '销售额(元)',
								data: result.data.sale.fee
							}]
						});
						//填入 费用比较
						compareChart.setOption({
							series: [{
								name: '金额(元)',
								// 根据名字对应到相应的系列
								data: result.data.total
							}]
						});
					}else{
						layer.msg("服务器提示:" + result.msg);
					}
				},
				error: function () {
					layer.alert("error");
				}
			});
		});
		</script >
	</body>
</html>

（ECharts资源下载：链接: 点击下载CSDN资源.）

最终结果

在这里插入图片描述
另外，鼠标停在直方图的某个柱子，或者饼状图的某块饼上，会显示对应的数据。
如下图中的红框所示

（补充：Emmm…上面2个截图里的鼠标图片是我为了演示效果P上去的，实际鼠标不长这样。但是红框展示的数据是真真切切的。）

小彩虹冲鸭

关注

14
点赞
踩
66

收藏

觉得还不错? 一键收藏
8
评论
Layui与ECharts结合，用Ajax动态展示图表数据

目录后端接口代码接口效果前端前端代码最终结果后端接口代码使用Spring+SpringMVC+MyBatis框架，具体接口如下 /** * layui 和 echart结合，展示图表 * * 1.展示本月各个星期的销售金额--直方图 * * 2.展示销售总额 vs 广告总费用--饼状图 * @return */ @RequestMapping("/layui/echart") @ResponseBody public Map<Stri
复制链接

扫一扫

专栏目录