javaweb EChart绘制折线图

最新推荐文章于 2024-03-28 13:42:07 发布

bin53719

最新推荐文章于 2024-03-28 13:42:07 发布

阅读量2.2k

点赞数

分类专栏： Java基础文章标签： echart

本文链接：https://blog.youkuaiyun.com/weixin_42130892/article/details/81303619

版权

本文介绍了如何在JavaWeb项目中利用ECharts库来绘制折线图。首先，要在HTML页面中引入ECharts的JS包，接着展示了一个简单的HTML页面结构。然后，通过jQuery AJAX进行数据初始化，最后，详细给出了后台Controller的实现，用于提供绘制折线图所需的数据。

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

首先引入echart的js包：

<script type="text/javascript" src="front/resource/js/echarts.min.js"></script>

<script type="text/javascript" src="front/resource/js/jquery-1.9.1.min.js"></script>

html页面如下：

<div id="main" style="width: 90%;height:120%;"></div>

相关jquery ajax初始化函数如下：

<script type="text/javascript">
function echartInit(){
	var option = {
	   	    tooltip: {
	   	        trigger: 'axis'
	   	    },
	   	    legend: {
	   	    	left: '3%',
	   	    	data:['价格走势']
	   	    },
	   	    grid: {
	   	    	top:'20%',
	   	        left: '2%',
	   	        right: '3%',
	   	        bottom: '10%',
	   	        containLabel: true