更新Spring boot + jsp 生成 Echarts 柱状图与饼状图

最新推荐文章于 2024-11-14 21:36:58 发布

夜空中最壮的星

最新推荐文章于 2024-11-14 21:36:58 发布

阅读量752

点赞数

分类专栏：代码苦工文章标签： jquery java

本文链接：https://blog.youkuaiyun.com/weixin_40463857/article/details/106436529

版权

本文介绍了如何在Spring Boot项目中结合JSP和ECharts生成柱状图与饼状图。首先，从ECharts官网下载所需JS文件并引入到项目中。接着，在JSP页面上创建两个div用于展示图表。后台代码主要涉及SQL操作，最终实现了图表的展示。如需咨询或讨论，作者提供了微信联系方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//首先先引入js,

//这个js在这里下载，点击在线定制
在这里插入图片描述
//然后进入这个页面，选择你需要实现的功能图标就行，点击下载，就会自动生成并下载，然后放在你项目里，引入就可以了

// jsp上写两个div

<div class="lf">
        <h3>地区分布</h3>
        <div class="con" id="area">
		</div>
</div>
 <div class="lr">
	    <h3>车辆类型分布</h3>
	    <div class="con" id="carType">
		</div>
</div>

//图表js
//加载数据
$(document).ready(function () {
   
        clickDate('active');
});

//这里是我初始化时间的一个方法, 可以直接看 setTableRowsfist()方法
function clickDate(name){
   
    	var date = new Date();
    	if(name == 'active'){
   
    		dateBegin = formatDateYYYYMMDD(date) + " 00:00:00";
    		setTableRowsfist(dateBegin, null);
    	} else if(name == 'monthActive'){
   
    		dateBegin = getTimeByDay(date) + " 00:00:00";
    		dateEnd = formatDateYYYYMMDD(da