编程之路~折线图

最新推荐文章于 2021-02-05 00:30:23 发布

hyy12658

最新推荐文章于 2021-02-05 00:30:23 发布

阅读量848

点赞数 1

分类专栏： java 文章标签：折线图

本文链接：https://blog.csdn.net/hyy12658/article/details/70244213

版权

java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

echart js库实现图表数据显示

jsp页面画个横纵坐标，标题等等，发送请求去后台，后台返回json map集合数据。

jsp代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ECharts-基本线性图及其配置要求</title>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/CSS/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/CSS/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/CSS/demo.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/JS/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/JS/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/JS/JsHelper/jgxLoader.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/JS/JsHelper/unsame.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/JS/UpAndDownJS/ajaxfileupload.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/JS/datagrid-detailview.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/JS/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/JS/echarts.min.js"></script>
</head>
<body>
<center>
<input name="title" class="easyui-validatebox" id="title" required="true">
<a href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="queryByInfo()">查询</a>
   最近<input id="day" value="30" type="text" size="1" />天
<div style="height: 20px;"></div>
<div id="main" style="height: 500px; border: 1px solid #ccc; padding: 10px;">
</div>
</center>
<script type="text/javascript" language="javascript">

function queryByInfo(){

var title=$('#title').val();
var day = $('#day').val();

var url="news/getAmount.do";
var args={"title":title,"rank":day}; //rank：可选天数
$.getJSON(url,args,function (data) {
// 填入数据
myChart.setOption({
xAxis : [
{
type : 'category',
boundaryGap : false,
data: data.updatetime , //从后台获取的map集合数据
axisLabel:{
rotate:60,//倾斜度 -90 至 90 默认为0
interval:0 //横轴全部显示
} //日期
}
],
yAxis : [
{

type : 'value',
axisLabel : {
formatter: '{value}'
}
}
],
series : [
{
name:'数量',
type:'line',
data: data.amount, //数量值
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
});
});
}
//初始化

var myChart = echarts.init(document.getElementById('main'));

//参数设置

option = {

title: { //标题组件

text: 'amount--day折线图'

},

tooltip: { //提示框组件

trigger: 'axis'

},

legend: { //图例组件

data: ['数量']

},

grid: { //直角坐标系内绘图网格
left: '3%',

right: '4%',

bottom: '10%', //日期显示不全可适当调节

containLabel: true
},
toolbox: { //工具栏
feature: {
saveAsImage: {}
}
},

/* xAxis: {
splitNumber:6,
data: [],
axisLabel:
{
rotate:60,
interval:0
}
}, */

yAxis: { //直角坐标系 grid 中的 y 轴
}
};


myChart.setOption(option); //参数设置方法

</script>
</body>

</html>

controller层代码

private NewsService newsService;

@RequestMapping(value=RequestMappingConstants.GET_AMOUNT)
@ResponseBody
public Map<String, String[]> getAmount(HttpServletRequest request,HttpServletResponse response,
@ModelAttribute News news) throws UnsupportedEncodingException{
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd"); //日期只保留天以上
String title = new String(news.getTitle().getBytes("iso-8859-1"),"utf-8"); //中文乱码
int day = news.getRank(); //可选天数

List<News> news1 = newsService.getnews(title);
Map<String, String[]> map = new HashMap<String,String[]>(); //将数据封装到map集合传到前台json接受

if(news1.size()<day){ //用户输入天数大于从数据库获取天数则以数据库为主
String[] list = new String[news1.size()]; //获取的日期及数量集合以数组形式保存，再存放到map中
String[] list2= new String[news1.size()];
for(int i=0;i<news1.size();i++){ //循环遍历赋值
list[i] = dateFormat.format(news1.get(i).getUpdatetime());    //日期筛选
/* list[i] = news1.get(i).getUpdatetime().toString(); */
list2[i]= news1.get(i).getAmounts().toString();
}
System.out.println(list2);
map.put("updatetime", list);
map.put("amount", list2);
}else{ //以用户天数为主
String[] list = new String[day];
String[] list2= new String[day];
for(int i=0;i<day;i++){
list[i] = news1.get(news1.size()-day+i).getUpdatetime().toString();
list2[i]= news1.get(news1.size()-day+i).getAmounts().toString();
}
System.out.println(list2);
map.put("updatetime", list);
map.put("amount", list2);
}

return map; //范围map集合
}

service层

@Override
public List<News> getnews(String title){
List<News> news = null;

Session session=HibernateSessionFactory.getSession();
Query query=null;
String wheresString="";
wheresString=" where title like '"+"%"+title+"%"+"' "; //根据输入框内容进行模糊查询返回news对象集合
query=session.createQuery(" from News"+ wheresString+"order by updatetime" );
System.out.println(query);
news=query.list();
session.close();

return news;
}