echart折线图删除_用Echart创建简单的折线图
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创建简单的折线图相关推荐
- excel箱形图中位数_在Excel中创建简单的箱形图
excel箱形图中位数 A box plot (box and whisker chart) lets you show how numbers are distributed in a set of ...
- java 有向无环图 树_拓扑排序-有向无环图(DAG, Directed Acyclic Graph)
条件: 1.每个顶点出现且只出现一次. 2.若存在一条从顶点 A 到顶点 B 的路径,那么在序列中顶点 A 出现在顶点 B 的前面. 有向无环图(DAG)才有拓扑排序,非DAG图没有拓扑排序一说. 一 ...
- 三维星座图查询_一种构造通信系统三维星座图的方法
一种构造通信系统三维星座图的方法 [专利摘要]本发明涉及一种构造通信系统三维星座图的方法,其包括:确定目标三维星座图的调制点数M:通过平面几何运算,列举所有调制点数小于或等于M的二维六角格星座图,并且 ...
- mootools 获取类名_使用MooTools创建简单的幻灯片,第III部分:创建类
mootools 获取类名 In my previous two slideshow posts, Create a Simple Slideshow Using MooTools and Creat ...
- 儿童吹泡泡水简单配方_儿童吹泡泡水简单配方[组图]
儿童吹泡泡水简单配方[组图] 09-19栏目:趣历史 TAG:儿童吹泡泡水简单配方 copyright jhua.org 浑火.胶火.洗净粗.洗脚液(能够用洗澡露大概洗收火替代),然后根据4:1:2: ...
- python能画k线图吗_,求教使用python绘制K线图
如何用python实现视频关键帧提取并保存为图片 import cv2 vc = cv2.VideoCapture('Test.avi') #读入视频文件 c=1 if vc.isOpened(): ...
- 魔众图床系统 v1.0.0 简单的私有化图床系统
魔众图床系统可以快速帮助可以搭建一个私有化图床系统,支持阿里云.腾讯云等各大云存储平台 魔众图床系统发布v1.0.0版本,新功能和Bug修复累计1项,简单的私有化图床系统. 2022年02月08日魔众 ...
- ai直线怎么变折线_用Illustrator制作简单的折线图
1文档设置 新建一个文档,'将单位设置为px,在高和宽输入600px.点开高级按钮,将颜色模式设置为RGB,栅格效果 screen 72 ppi.将新建对象与网格对齐取消勾选.点击确定. 接下来我们要 ...
- java 折线_用Java绘制简单的折线图
只是对气垫船充满鳗鱼的解决方案的补充: 我重新设计了他的代码,对其进行了一些微调,添加了网格,轴标签,现在Y轴从当前的最小值变为最大值.我计划添加一些吸气剂/吸气剂,但我不需要它们,可以根据需要添加它 ...
最新文章
- 2020年,你读到印象最深的论文是哪篇?
- Oracle 11g Release 1 (11.1) Data Pump 导出模式
- idea java 非web程序打包
- Android存储数据到本地文件
- MoeCTF 2021Re部分------RedC4Bomb
- 【转】DE2_TV例程的几点说明
- Windows下mysql忘记root密码的解决方法
- java 配置写成表达式_Java的正则表达式之小结
- 查询linux服务器事物传输失败日志,查看fail2ban日志代替lastb查看登录失败记录
- 《是碰巧还是执着?python所阅读的每一场知识点,唯一的共同点就是——参赛选手中,有python之socket编程!》
- 【转载】分层开发思想与小笼包
- 全体离职员工致某IT老板的一封公开信
- origin柱状图同时有两组数和两组数差值_Origin入门教程(十二):「误差棒」棒棒棒儿...
- 《Web前端技术H5+CSS3》笔记--第一章 HTML基础[云图智联]
- 高通 android 7.0 插入蓝牙耳机,声音变的最大!
- 计算机的未来展望英语作文,展望未来英语作文5篇
- [训练9] 创建猫类
- 广东专升本C语言程序设计(完结)
- 中国操纵杆电位计市场现状研究分析与发展前景预测报告(2022)
- 牵手家居品牌翘楚,瑞泰信息助力罗浮宫数字化营销管理能力持续升级
热门文章
- docker 镜像修改的配置文件自动还原_所以到底该如何修改 docker 容器的端口映射!!!...
- 可以参考临摹借鉴的中国风新年海报模板
- 惊叹C4D设计作品分享,超级给力的灵感
- 限时抢购促销海报设计没想法,看这里!眼见的倒计时紧迫感
- speedtest命令行linux,Linux或者Mac下命令行speedtest测试网络速度
- python怎样算学的好_python怎么学习好
- Go语言学习Day04
- 【Linux内核之旅】eBPF C语言入门架构
- get_mempolicy(2) /set_mempolicy(2)/mbind(2)/numa(3) — Linux manual page
- Linux内核概念:per-CPU,cpumask,inicall机制,通知链