基于osp平台和Echarts的折线图案例

最新推荐文章于 2022-10-01 08:33:44 发布

Swguo_Study

最新推荐文章于 2022-10-01 08:33:44 发布

阅读量145

点赞数

分类专栏：需求文章标签： echarts

本文链接：https://blog.csdn.net/qq_36122157/article/details/103124758

版权

需求专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端代码：

利用ajax传递json串来实现前后台分离

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>折线图</title>

<!--  第一步：引入layUI和echarts资源  -->
		<script type="text/javascript" src="/osp/demo/lib/layui/echarts.js"></script>
		<script type="text/javascript" src="/osp/demo/lib/layui/jquery-1.10.2.js"></script>
</head>
<body >
<!--  第二步：创建一个存放图标的DOM容器  --> 
       <div id="container" style="height: 500px"></div>
       <div style="display: ">
       
       <script type="text/javascript">
       
<!--  第三步：通过ajax传输json串  -->
       $.ajax({
       	type : "get",
       	url : "/osp/demo/rest/line/show", 
       	dataType : "json", 
       	success : function(data) { 
       		
<!--  第四步：绑定DOM容器 ，将echarts对象放入DOM中 -->
       		var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			
<!--  第五步：建立option对象，并将接受的json对象填入option -->
			var option = null;
			var title=data.title;
			var legend=data.legend;
			var xAxis =data.xAxis;
			var series=data.series;
			option = {
  			  title: {
      			  text: title
    			},
   			 tooltip: {
      			  trigger: 'axis'
   			 },
   			 legend: {
       			 data:legend
    			},
   			 grid: {
      			  left: '3%',
      			  right: '4%',
       			 bottom: '3%',
       			 containLabel: true
   			 },
   			 toolbox: {
        			feature: {
           			 saveAsImage: {}
       			 }
    			},
   			 xAxis: {
     			   type: 'category',
     			   boundaryGap: false,
      			  data:  xAxis
   			 },
   			 yAxis: {
    			    type: 'value'
   			 },
  			  series:  series
			};
			
<!--  第六步：将option放入DOM容器中的 myChart对象，展示-->
			if (option && typeof option === "object") {
   			 myChart.setOption(option, true);
			}
       	},
       	error : function(errorMsg) {
       		//请求失败时执行该函数
       		alert("图表请求数据失败!");
       		myChart.hideLoading();
       	}
       })		
       </script>
   </body>
</html>

后台代码

package com.nari.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSONObject;
import com.nari.osp.dbaccess.IDBAccess;

@Controller
@RequestMapping("/line")
public class lineController {

	@Autowired
	private IDBAccess dbaccess;
	
	@ResponseBody
	@RequestMapping("/show")
	public JSONObject getLine(){
		
//1、获取月份对应数据 （y轴的value值）
		String sql="select REVERSE_ACTIVE_VALUE " +
				"from SG_CON_HVDCSYS_H_MON_QUA " +
				"where DATASOURCE_ID='0021330000' " +
				"and ID='01509901000003' " +
				"and REVERSE_ACTIVE_VALUE>0" +
				" order by MONTH asc " +
				"limit 10";
		List<Object> valueList=dbaccess.executeSqlQuery(sql);
		
// 2、获取月份  （X轴的time点）
		String sql1="select MONTH " +
				"from SG_CON_HVDCSYS_H_MON_QUA " +
				"where DATASOURCE_ID='0021330000' " +
				"and ID='01509901000003' " +
				"and REVERSE_ACTIVE_VALUE>0" +
				" order by MONTH asc " +
				"limit 10";
		List<Object> monthList=dbaccess.executeSqlQuery(sql1);
		
// 3、从数据库中拿到的时间是时间戳（年月日时分秒），将其转为字符串（年月日）
		List<String> list=new ArrayList<String>();
		for (Object object : monthList) {
			Date data=(Date) object;
			list.add(data.toString().substring(0,10));
		}
	
// 4、拼接option中的series需要的数据   series : [{ name:'', type:'', data:[] }]
		JSONObject series=new JSONObject();
		series.put("name","产量" );
		series.put("type","line" );
		series.put("stack","总量" );
		series.put("data",valueList );     // y轴的value值的集合（注意要是object类型才可用）
		
// 5、拼接option中的字段    option = { title:{}, lengtnd:{},xAxis:{}, series:[] }
		JSONObject jsonObject=new JSONObject();
		jsonObject.put("title","折线图" );
		jsonObject.put("legend","产量");
		jsonObject.put("xAxis",list);   // X轴
		jsonObject.put("series",series);
		System.out.println(jsonObject);
		return jsonObject;                  //  6、返回拼接好了的json数据
	}
}

Swguo_Study

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于osp平台和Echarts的折线图案例

前端代码：利用ajax传递json串来实现前后台分离<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" co...
复制链接

扫一扫