pageEncoding="UTF-8"%>

机组耗电量统计图

layui.use('element', function() {

var $ = layui.jquery, element = layui.element(); //Tab的切换功能,切换事件监听等,需要依赖element模块

//触发事件

var active = {

tabAdd : function() {

//新增一个Tab项

element.tabAdd('demo', {

title : '新选项' + (Math.random() * 1000 | 0) //用于演示

,

content : '内容' + (Math.random() * 1000 | 0)

})

},

tabDelete : function() {

//删除指定Tab项

element.tabDelete('demo', 2); //删除第3项(注意序号是从0开始计算)

},

tabChange : function() {

//切换到指定Tab项

element.tabChange('demo', 1); //切换到第2项(注意序号是从0开始计算)

}

};

$('.site-demo-active').on('click', function() {

var type = $(this).data('type');

active[type] ? active[type].call(this) : '';

});

});

// 路径配置

require.config({

paths : {

echarts : 'http://echarts.baidu.com/build/dist'

}

});

// 使用

require([ 'echarts', 'echarts/chart/line' // 使用柱状图就加载bar模块,按需加载 (需修改为相应的图形名称)

], function(ec) {

// 基于准备好的dom,初始化echarts图表

var myChart = ec.init(document.getElementById('mainone'));

var myChartMonth = ec.init(document.getElementById('maintwo'));

var myChartYear = ec.init(document.getElementById('mainthree'));

loadEchartPower(myChart,1);

//日耗电量

var dayObj = document.getElementById("power_day");

dayObj.addEventListener("click", function(){

loadEchartPower(myChart,1);

}, true);

//月耗电

var monthObj = document.getElementById("power_month");

monthObj.addEventListener("click", function(){

loadEchartPower(myChartMonth,2);

}, true);

//年耗电

var yearObj = document.getElementById("power_year");

yearObj.addEventListener("click", function(){

loadEchartPower(myChartYear,3);

}, true);

});

//机组及蒸发器功率

function loadEchartPower(myChart, type){

var index = layer.load(2, {shade: false},{time: 5*1000}); //0代表加载的风格,支持0-2   添加加载层

$.ajax({

url:path+'/chart/aircrewTmep',

dataType:'json',

type:'post',

data:{coding:'${coding}',type:type},

success:function(data){

//console.log(JSON.stringify(data.series));

//console.log(data.legend);

layer.close(index); //关闭加载层

/*

var legendArr = ['蒸发器1','蒸发器2','蒸发器3','机组1'];

var seriesArr = [{"name":"蒸发器1","type":"line","stack":null,

"data":["0.5","1.00","1.20","1.00","2.50","1.50","4.00","2.50","3.00","1.00","2.00","1.00","2.30","4.00"],"smooth":false},

{"name":"蒸发器2","type":"line","stack":null,

"data":["1.00","1.2","1.5","1.8","2.0","1.5","1.2","2.2","2.3","1.5","2.5","2.8","3.0","3.5"],"smooth":false},

{"name":"蒸发器3","type":"line","stack":null,

"data":["1.2","1.5","1.8","2.0","1.8","1.5","2.2","2.5","2.7","2.0","1.9","2.63","2.8","3.7"],"smooth":false},

{"name":"机组1","type":"line","stack":null,

"data":["2.0","1.2","1.5","1.8","2.1","1.6","1.3","1.8","1.4","1.5","1.6","2.3","3.5","4.0"],"smooth":false}];

*/

option = {

title : {

text : '机组耗电量统计图',

subtext : '时间/耗电量'

},

tooltip : {

trigger : 'axis'

},

legend : {

data : data.legend

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},

restore : {show: true},

saveAsImage : {show: true}

}

},

calculable : true,

xAxis : [ {

type : 'category',

boundaryGap : false,

data : data.time

} ],

yAxis : [ {

type : 'value'

} ],

series : data.series,

};

// 为echarts对象加载数据

myChart.setOption(option);

}

});

}

@Controller

@RequestMapping("/chart")

public class ChartCtrl {

@Autowired

private ChartService chartService;

/**

* 机组耗电量

*/

@RequestMapping("/aircrewTmep")

@ResponseBody

public Map aircrewTmep(HttpSession session,HttpServletRequest req){

HashMap rlt = new HashMap<>();

try {

Object identityCode = session.getAttribute("identity_code");

if(identityCode==null||"".equals(identityCode)){

return null;

}

String type = req.getParameter("type");

HashMap map = new HashMap<>();

map.put("identity_code", identityCode.toString());

map.put("coding", req.getParameter("coding"));

rlt=chartService.aircrewTmep(map, type);

} catch (Exception e) {

e.printStackTrace();

}

return rlt;

}

}

@Service

public class ChartService {

public HashMap aircrewTmep(HashMap map,String type){

HashMap rlt = new HashMap<>();

List chartserieslist = new ArrayList<>();

List legendlist = new ArrayList<>();

String json = null;

String[] timeArr = null;

try {

if(1==Integer.parseInt(type)){//日

map.put("day", DateTools.createDate());

json = HttpClientUtil.httpPost("http://localhost:8080/test/app/running/day/", map, "utf-8");

}else if(2==Integer.parseInt(type)){//月

map.put("day", DateTools.yearMonth());

json = HttpClientUtil.httpPost("http://localhost:8080/test/app/running/month/", map, "utf-8");

}else{//年

map.put("day", DateTools.nowYear());

json = HttpClientUtil.httpPost("http://localhost:8080/test/app/running/year/", map, "utf-8");

}

System.out.println("---json---"+json);

if(json != null){

ObjectMapper mapper = new ObjectMapper();

JsonNode tree = mapper.readTree(json);

JsonNode evaporatorList = tree.findValue("data").findPath("evaporator");

for (int i = 0; i < evaporatorList.size(); i++) {

JsonNode chart = evaporatorList.get(i);

JsonNode evaplist = chart.findPath("power");

ChactSeriesVO aevo = new ChactSeriesVO();

aevo.setName(chart.get("title").asText());

aevo.setType("line");

aevo.setSmooth(false);

aevo.setData(tempArr(evaplist));

chartserieslist.add(aevo);

legendlist.add(chart.get("title").asText());

}

JsonNode aircrewlist = tree.findValue("data").findValue("aircrew").findPath("power");

ChactSeriesVO tempaevo = new ChactSeriesVO();

tempaevo.setName(tree.findValue("data").findValue("aircrew").findValue("title").asText());

tempaevo.setType("line");

tempaevo.setSmooth(false);

tempaevo.setData(tempArr(aircrewlist));

chartserieslist.add(tempaevo);

legendlist.add(tree.findValue("data").findValue("aircrew").findValue("title").asText());

JsonNode timelist = tree.findValue("data").findPath("time");

timeArr = new String[timelist.size()];

for (int m = 0; m < timelist.size(); m++) {

String strtime = DateTools.stampToDate(timelist.get(m).asText());

if(1==Integer.parseInt(type)){

timeArr[m] = DateTools.strToHour(strtime);

}else if(2==Integer.parseInt(type)){

timeArr[m] = DateTools.strToDate(strtime);

}else{

timeArr[m] = DateTools.strToMonth(strtime);

}

}

//System.out.println("---evaporatorList--"+evaporatorList);

}

} catch (Exception e) {

e.printStackTrace();

}

rlt.put("time", timeArr);

rlt.put("series", chartserieslist);

rlt.put("legend", legendlist);

return rlt;

}

//字符串数组赋值

public String[] tempArr(JsonNode templist){

String[] powerarr = new String[templist.size()];

for (int i = 0; i < templist.size(); i++) {

powerarr[i] = new String(templist.get(i).asText());

}

return powerarr;

}

}

/*****************----series对应的实体类----固定字段---方便页面取值-----***********************/

package com.shangyukeji.icoolcloud.vo;

public class ChactSeriesVO {

private String name;

private String type;

private String stack;

private String[] data;

private boolean smooth;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getType() {

return type;

}

public void setType(String type) {

this.type = type;

}

public String getStack() {

return stack;

}

public void setStack(String stack) {

this.stack = stack;

}

public String[] getData() {

return data;

}

public void setData(String[] data) {

this.data = data;

}

public boolean isSmooth() {

return smooth;

}

public void setSmooth(boolean smooth) {

this.smooth = smooth;

}

}

echart折线图删除_用Echart创建简单的折线图相关推荐

  1. excel箱形图中位数_在Excel中创建简单的箱形图

    excel箱形图中位数 A box plot (box and whisker chart) lets you show how numbers are distributed in a set of ...

  2. java 有向无环图 树_拓扑排序-有向无环图(DAG, Directed Acyclic Graph)

    条件: 1.每个顶点出现且只出现一次. 2.若存在一条从顶点 A 到顶点 B 的路径,那么在序列中顶点 A 出现在顶点 B 的前面. 有向无环图(DAG)才有拓扑排序,非DAG图没有拓扑排序一说. 一 ...

  3. 三维星座图查询_一种构造通信系统三维星座图的方法

    一种构造通信系统三维星座图的方法 [专利摘要]本发明涉及一种构造通信系统三维星座图的方法,其包括:确定目标三维星座图的调制点数M:通过平面几何运算,列举所有调制点数小于或等于M的二维六角格星座图,并且 ...

  4. mootools 获取类名_使用MooTools创建简单的幻灯片,第III部分:创建类

    mootools 获取类名 In my previous two slideshow posts, Create a Simple Slideshow Using MooTools and Creat ...

  5. 儿童吹泡泡水简单配方_儿童吹泡泡水简单配方[组图]

    儿童吹泡泡水简单配方[组图] 09-19栏目:趣历史 TAG:儿童吹泡泡水简单配方 copyright jhua.org 浑火.胶火.洗净粗.洗脚液(能够用洗澡露大概洗收火替代),然后根据4:1:2: ...

  6. python能画k线图吗_,求教使用python绘制K线图

    如何用python实现视频关键帧提取并保存为图片 import cv2 vc = cv2.VideoCapture('Test.avi') #读入视频文件 c=1 if vc.isOpened(): ...

  7. 魔众图床系统 v1.0.0 简单的私有化图床系统

    魔众图床系统可以快速帮助可以搭建一个私有化图床系统,支持阿里云.腾讯云等各大云存储平台 魔众图床系统发布v1.0.0版本,新功能和Bug修复累计1项,简单的私有化图床系统. 2022年02月08日魔众 ...

  8. ai直线怎么变折线_用Illustrator制作简单的折线图

    1文档设置 新建一个文档,'将单位设置为px,在高和宽输入600px.点开高级按钮,将颜色模式设置为RGB,栅格效果 screen 72 ppi.将新建对象与网格对齐取消勾选.点击确定. 接下来我们要 ...

  9. java 折线_用Java绘制简单的折线图

    只是对气垫船充满鳗鱼的解决方案的补充: 我重新设计了他的代码,对其进行了一些微调,添加了网格,轴标签,现在Y轴从当前的最小值变为最大值.我计划添加一些吸气剂/吸气剂,但我不需要它们,可以根据需要添加它 ...

最新文章

  1. 2020年,你读到印象最深的论文是哪篇?
  2. Oracle 11g Release 1 (11.1) Data Pump 导出模式
  3. idea java 非web程序打包
  4. Android存储数据到本地文件
  5. MoeCTF 2021Re部分------RedC4Bomb
  6. 【转】DE2_TV例程的几点说明
  7. Windows下mysql忘记root密码的解决方法
  8. java 配置写成表达式_Java的正则表达式之小结
  9. 查询linux服务器事物传输失败日志,查看fail2ban日志代替lastb查看登录失败记录
  10. 《是碰巧还是执着?python所阅读的每一场知识点,唯一的共同点就是——参赛选手中,有python之socket编程!》
  11. 【转载】分层开发思想与小笼包
  12. 全体离职员工致某IT老板的一封公开信
  13. origin柱状图同时有两组数和两组数差值_Origin入门教程(十二):「误差棒」棒棒棒儿...
  14. 《Web前端技术H5+CSS3》笔记--第一章 HTML基础[云图智联]
  15. 高通 android 7.0 插入蓝牙耳机,声音变的最大!
  16. 计算机的未来展望英语作文,展望未来英语作文5篇
  17. [训练9] 创建猫类
  18. 广东专升本C语言程序设计(完结)
  19. 中国操纵杆电位计市场现状研究分析与发展前景预测报告(2022)
  20. 牵手家居品牌翘楚,瑞泰信息助力罗浮宫数字化营销管理能力持续升级

热门文章

  1. docker 镜像修改的配置文件自动还原_所以到底该如何修改 docker 容器的端口映射!!!...
  2. 可以参考临摹借鉴的中国风新年海报模板
  3. 惊叹C4D设计作品分享,超级给力的灵感
  4. 限时抢购促销海报设计没想法,看这里!眼见的倒计时紧迫感
  5. speedtest命令行linux,Linux或者Mac下命令行speedtest测试网络速度
  6. python怎样算学的好_python怎么学习好
  7. Go语言学习Day04
  8. 【Linux内核之旅】eBPF C语言入门架构
  9. get_mempolicy(2) /set_mempolicy(2)/mbind(2)/numa(3) — Linux manual page
  10. Linux内核概念:per-CPU,cpumask,inicall机制,通知链