喷煤趋势报警，趋势轴样式修改完成
This commit is contained in:
dell
@ -625,10 +625,10 @@
|
||||
// min: 0,
|
||||
// 让表格的刻度向靠里侧显示
|
||||
axisTick: {
|
||||
inside: true
|
||||
inside: false
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
inside: false,
|
||||
align: 'left',
|
||||
verticalAlign: 'bottom',
|
||||
},
|
||||
|
||||
@ -532,7 +532,12 @@
|
||||
return chardatalist;
|
||||
}
|
||||
|
||||
|
||||
//true
|
||||
//false
|
||||
//第一条Y轴是否显示轴线
|
||||
const oneAxisLineShow = true;
|
||||
//其他Y轴是否显示轴线
|
||||
const otherAxisLineShow = false;
|
||||
|
||||
showchart = async function () {
|
||||
//(document.getElementById('echarts-records'), 'walden');
|
||||
@ -562,9 +567,21 @@
|
||||
|
||||
var xDataArr = new Array();
|
||||
var yDataArr = new Array();
|
||||
var maxArr = new Array();
|
||||
var minArr = new Array();
|
||||
var intervalArr = new Array();
|
||||
for (var listindex = 0; listindex < chardatalist.length; listindex++) {
|
||||
let ydata = chardatalist[listindex].map(x => { return x.value });
|
||||
let xdata = chardatalist[listindex].map(x => { return x.name });
|
||||
debugger;
|
||||
let maxSrc = Math.max.apply(null, ydata);
|
||||
let newMax = Math.ceil(maxSrc / 5) * 5;
|
||||
maxArr.push(newMax);
|
||||
let minSrc = Math.min.apply(null, ydata);
|
||||
let newMin = Math.floor(minSrc / 5) * 5
|
||||
minArr.push(newMin);
|
||||
let interval = (newMax - newMin) / 5
|
||||
intervalArr.push(interval);
|
||||
xDataArr.push(xdata);
|
||||
yDataArr.push(ydata);
|
||||
}
|
||||
@ -591,32 +608,37 @@
|
||||
let yAxisdata = {
|
||||
name: JSON.parse(JSON.stringify(unitnames[ci])),
|
||||
nameLocation: 'center',
|
||||
nameGap:5,
|
||||
nameRotate:270,
|
||||
max: maxArr[ci],
|
||||
min: minArr[ci],
|
||||
interval: intervalArr[ci],
|
||||
//splitNumber:21,
|
||||
type: 'value',
|
||||
//position:'left',
|
||||
//坐标轴两边留白策略，设置max、min后失效
|
||||
boundaryGap: ['5%', '2%'],
|
||||
// max: 700,
|
||||
// min: 0,
|
||||
// 让表格的刻度向靠里侧显示
|
||||
axisTick: {
|
||||
show: true,
|
||||
inside: true
|
||||
inside: false,
|
||||
length: 9,
|
||||
},
|
||||
minorTick:{
|
||||
show:true,
|
||||
length: 7,
|
||||
length: 5,
|
||||
},
|
||||
minorSplitLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
align: 'left',
|
||||
inside: false,
|
||||
align: 'right',
|
||||
verticalAlign: 'bottom',
|
||||
},
|
||||
// 设置刻度线的颜色等样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
show: oneAxisLineShow,
|
||||
onZero: true,
|
||||
onZeroAxisIndex:0,
|
||||
lineStyle: {
|
||||
@ -641,8 +663,12 @@
|
||||
let yAxisdata = {
|
||||
name: JSON.parse(JSON.stringify(unitnames[ci])),
|
||||
nameLocation: 'center',
|
||||
// max: 800,
|
||||
// min: 0,
|
||||
nameGap: 5,
|
||||
nameRotate: 270,
|
||||
max: maxArr[ci],
|
||||
min: minArr[ci],
|
||||
interval: intervalArr[ci],
|
||||
//splitNumber: 21,
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
//坐标轴两边留白策略，设置max、min后失效
|
||||
@ -650,22 +676,23 @@
|
||||
//alignTicks:true,
|
||||
axisTick: {
|
||||
show:true,
|
||||
inside: true
|
||||
},
|
||||
minorTick: {
|
||||
show: true,
|
||||
length: 7,
|
||||
inside: false,
|
||||
length: 9,
|
||||
},
|
||||
//minorTick: {
|
||||
// show: true,
|
||||
// length: 5,
|
||||
//},
|
||||
minorSplitLine:{
|
||||
show:true,
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
align: 'left',
|
||||
inside: false,
|
||||
align: 'right',
|
||||
verticalAlign: 'bottom',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
show: otherAxisLineShow,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
//color: color[ci],
|
||||
@ -674,7 +701,7 @@
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false //想要不显示网格线，改为false
|
||||
show: true //想要不显示网格线，改为false
|
||||
},
|
||||
// 设置坐标轴偏移位置
|
||||
offset: (ci) * 40
|
||||
@ -919,6 +946,7 @@
|
||||
<body style="height:100%">
|
||||
|
||||
<script type="text/javascript" src="~/lib/echarts-5.3.0/dist/echarts.js"></script>
|
||||
|
||||
<div class="layui-fluid" style="padding:0 0px;height:100%">
|
||||
<div class="layui-row layui-col-space5" style="height:100%">
|
||||
<div class="layui-col-md2 layui-col-xs3" style="height:100%;padding-right:12px;">
|
||||
|
||||
@ -969,7 +969,30 @@
|
||||
yAxis.push(yAxisdata);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
*一
|
||||
1、复用制粉趋势界面源码建立喷煤趋势界面。
|
||||
2、改进趋势图的曲线颜色设定，按照单位分类，相同单位变量绑定同一色系。
|
||||
3、曲线对应Y轴数量合并，根据单词选择变量中单位类型数量，生成对应单位的轴。
|
||||
4、修改补充冀南钢铁喷煤制粉技术方案。
|
||||
*二
|
||||
1、增加顶部趋势图列显示，对应变量和曲线颜色，点击可显示和隐藏曲线。
|
||||
2、增加趋势鼠标滚轮放大功能，在趋势上滚动滚轮对应缩短和增加时间跨度。
|
||||
3、增加拖拽功能，在缩小时间跨度后，左键拖拽左右平移时间轴。
|
||||
4、喷煤趋势后台控制器和数据服务重新构建，按照多系统方式，可查配置变量模板和多系统部署时不同数据。
|
||||
5、协助水分仪上位机微波趋势显示修改，加大Y轴水分值量程，增加X轴时间跨度。
|
||||
*三
|
||||
1、根据曲工的喷煤趋势模板表，自动生成历史趋势界面变量选择项，拆分速率相关变量和重要参数变量。
|
||||
2、调用曲工查询过程，构建选择变量列表依次查询数据，绑定至对应曲线和对应坐标轴。
|
||||
3、构建趋势chart的容器、X轴、Y轴、变量曲线实例、图例、颜色数组、鼠标提示框，组合生成趋势。
|
||||
*四
|
||||
1、套用实时趋势的界面、前端JS、后端控制器、服务等实现代码，复用至喷煤实时趋势并制作该界面。
|
||||
2、接入采集服务的实时数据库，设置实时趋势初始化时记录三秒钟实时数据来进行实时趋势初始化。
|
||||
*五
|
||||
1、生成喷煤趋势变量随机数通过采集服务Api写入300cpu中，用来模拟实时趋势。
|
||||
2、添加趋势刷新方法，按周期刷新趋势数据。
|
||||
3、构建实时趋势，设置曲线数据从采集服务中的实时数据中每秒增加数据，最大数据量50个。
|
||||
*/
|
||||
|
||||
//for (var ci = 0; ci < StaticSelectTagList.length; ci++) {
|
||||
// if (ci == 0) {
|
||||
|
||||
Reference in New Issue
Block a user