基于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" 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 {@Autowiredprivate 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数据}
}

基于osp平台和Echarts的折线图案例相关推荐

echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
echarts画折线图和数据excel导出
最近一直使用echarts画折线图,在此做个记录最后样式代码 <!DOCTYPE html> <html style="height: 100%">&l ...
nari基于osp平台的后端简单curd案例
本片主要描述了基于osp平台的简单的增删改查的小案例.便于记忆. 以table表格的前后端拿数据为例子! 在table中展示数据 @Controller @RequestMapping("/ ...
echarts动态折线图拉扯变形问题
echarts动态折线图拉扯变形问题在使用echarts折线图做动态数据展示时,发现一个bug 当折线图的一个数值较高点紧挨着一个数值为零的点,guyong时图形会被拉扯,应该是echart的bu ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
使用 Echarts 实现折线图中线条添加、删除、编辑
使用 Echarts 实现折线图中线条添加.删除.编辑小帅小白,也能改变浪花的方向,公众号:51reboot运维开发介绍一下使用 Echarts 做数据统计分析,如何实现支持折线图的添加.删除. ...
小程序mpvue图片绘制水印_基于mpvue小程序使用echarts画折线图的方法示例
第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. 关 ...

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

前端代码：

后台代码

基于osp平台和Echarts的折线图案例相关推荐

最新文章

热门文章