JS实现柱状图、折线图

最新推荐文章于 2023-10-10 11:51:47 发布

海未眠。

最新推荐文章于 2023-10-10 11:51:47 发布

阅读量6k

点赞数 1

文章标签：折线图柱状图

本文链接：https://blog.csdn.net/weixin_42314754/article/details/87935580

版权

本文介绍如何利用JavaScript实现柱状图和折线图的绘制，包括展示效果图，以及在JSP页面中应用JS代码的详细步骤。

摘要由CSDN通过智能技术生成

效果图：

折线图

柱状图

JSP页面：

<div class="canvesbox">
                	<div class="la">	
	                	<button class="aweek">最近一周</button>
		                <select id="myselect">
		                </select>
			</div>
                	<div id="chartmain" style="width:100%; height: 400px;margin-top: 15px;"></div>
                	<div id="chartweek" style="width:100%; height: 400px;margin-top: 15px;"></div>
               		 <div class="allNum">
	                	年消费总计：<span class="colorNum"> ￥</span>	<span class="zongjije colorNum fontNum"></span>元
	                </div>
	                
	                <div class="weekNum">
	                	最近消费总计：<span class="colorNum"> ￥</span>	<span class="weekje colorNum fontNum"></span>元
	                </div>
</div>

JS：

<script type="text/javascript" src='<c:url value="/js/echarts.js"></c:url>'></script>

$(function() {
	getData();
	getOpen();
	$("#chartmain").hide();
    $(".allNum").hide();
    $(".aweek").css({'border':'2px solid #6178EA'});
})

//获取数据库消费的所有的年份
function getOpen(){
    	$.ajax({
            url: "路径",