新兴全变量曲线合并坐标轴
This commit is contained in:
dell
@ -580,7 +580,12 @@
|
||||
return chardatalist;
|
||||
}
|
||||
|
||||
|
||||
//true
|
||||
//false
|
||||
//第一条Y轴是否显示轴线
|
||||
const oneAxisLineShow = true;
|
||||
//其他Y轴是否显示轴线
|
||||
const otherAxisLineShow = true;
|
||||
|
||||
showchart = async function () {
|
||||
//(document.getElementById('echarts-records'), 'walden');
|
||||
@ -591,12 +596,47 @@
|
||||
|
||||
var chardatalist = await GetChartsTagValue();
|
||||
|
||||
var maxArr = new Array();
|
||||
var minArr = new Array();
|
||||
var intervalArr = new Array();
|
||||
|
||||
var unitsrc = new Array();
|
||||
var unitnames = new Array();
|
||||
var unitcolor = new Array();
|
||||
|
||||
for (var ddi = 0; ddi < StaticSelectTagList.length; ddi++) {
|
||||
var unit_now = StaticSelectTagList[ddi].Units;
|
||||
if (unitsrc.indexOf(unit_now) == -1) {
|
||||
debugger;
|
||||
unitsrc.push(unit_now);
|
||||
// unitnames.push(StaticSelectTagList[ddi].UnitType + "(" + StaticSelectTagList[ddi].Units + ")");
|
||||
unitnames.push(StaticSelectTagList[ddi].Units);
|
||||
unitcolor.push(CHARTSRGB[ddi]);
|
||||
|
||||
|
||||
let ydata = chardatalist[ddi].map(x => { return x.value });
|
||||
let xdata = chardatalist[ddi].map(x => { return x.name });
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
else { }
|
||||
}
|
||||
|
||||
debugger;
|
||||
myChart.dispose();
|
||||
|
||||
var xDataArr = new Array();
|
||||
var yDataArr = new Array();
|
||||
var maxArr = new Array();
|
||||
var minArr = 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 });
|
||||
@ -604,8 +644,8 @@
|
||||
yDataArr.push(ydata);
|
||||
}
|
||||
var lightwhite = 0;
|
||||
if (chardatalist.length > 1) {
|
||||
lightwhite = (chardatalist.length - 1) * 100;
|
||||
if (unitsrc.length > 1) {
|
||||
lightwhite = (unitsrc.length) * 40;
|
||||
}
|
||||
|
||||
//var lightwhite = (chardatalist.length) * 100;
|
||||
@ -616,11 +656,17 @@
|
||||
|
||||
|
||||
var yAxis = new Array();
|
||||
for (var ci = 0; ci < StaticSelectTagList.length; ci++) {
|
||||
var maxYs = unitsrc.length;
|
||||
for (var ci = 0; ci < unitsrc.length; ci++) {
|
||||
if (ci == 0) {
|
||||
let yAxisdata = {
|
||||
name: JSON.parse(JSON.stringify(StaticSelectTagList[ci].Description)),
|
||||
name: JSON.parse(JSON.stringify(unitnames[ci])),
|
||||
nameLocation: 'center',
|
||||
nameGap: 5,
|
||||
nameRotate: 270,
|
||||
max: maxArr[ci],
|
||||
min: minArr[ci],
|
||||
interval: intervalArr[ci],
|
||||
type: 'value',
|
||||
//坐标轴两边留白策略，设置max、min后失效
|
||||
boundaryGap: ['5%', '2%'],
|
||||
@ -628,18 +674,31 @@
|
||||
// min: 0,
|
||||
// 让表格的刻度向靠里侧显示
|
||||
axisTick: {
|
||||
inside: true
|
||||
show: true,
|
||||
inside: false,
|
||||
length: 9,
|
||||
},
|
||||
minorTick: {
|
||||
show: true,
|
||||
length: 5,
|
||||
},
|
||||
minorSplitLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
align: 'left',
|
||||
align: 'right',
|
||||
verticalAlign: 'bottom',
|
||||
},
|
||||
// 设置刻度线的颜色等样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
show: oneAxisLineShow,
|
||||
onZero: true,
|
||||
onZeroAxisIndex: 0,
|
||||
lineStyle: {
|
||||
color: CHARTSRGB[ci],
|
||||
//color: color[ci],
|
||||
|
||||
color: unitcolor[ci],
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
@ -655,30 +714,44 @@
|
||||
}
|
||||
else {
|
||||
let yAxisdata = {
|
||||
name: JSON.parse(JSON.stringify(StaticSelectTagList[ci].Description)),
|
||||
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],
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
//坐标轴两边留白策略，设置max、min后失效
|
||||
boundaryGap: ['5%', '2%'],
|
||||
axisTick: {
|
||||
show: true,
|
||||
inside: false,
|
||||
length: 9,
|
||||
},
|
||||
minorSplitLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
inside: false,
|
||||
align: 'right',
|
||||
verticalAlign: 'bottom',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
show: otherAxisLineShow,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: CHARTSRGB[ci],
|
||||
//color: color[ci],
|
||||
color: unitcolor[ci],
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false //想要不显示网格线，改为false
|
||||
show: true //想要不显示网格线，改为false
|
||||
},
|
||||
// 设置坐标轴偏移位置
|
||||
offset: (ci - 1) * 100
|
||||
offset: (ci) * 40
|
||||
//offset: (ci) * 100
|
||||
}
|
||||
yAxis.push(yAxisdata);
|
||||
@ -687,6 +760,14 @@
|
||||
|
||||
var series = new Array();
|
||||
for (var si = 0; si < StaticSelectTagList.length; si++) {
|
||||
var unitIndex = 0;
|
||||
var unitss = StaticSelectTagList[si].Units;
|
||||
for (var ui = 0; ui < unitsrc.length; ui++) {
|
||||
if (unitsrc[ui] == unitss) {
|
||||
unitIndex = ui;
|
||||
break;
|
||||
}
|
||||
}
|
||||
debugger;
|
||||
//bool变量取消平滑采取折线
|
||||
let issmooth = !(StaticSelectTagList[si].Units ==='Y/N')
|
||||
@ -696,7 +777,7 @@
|
||||
// 曲线名
|
||||
name: JSON.parse(JSON.stringify(StaticSelectTagList[si].Description)),
|
||||
// 设置参数对应的y坐标轴的索引
|
||||
yAxisIndex: si,
|
||||
yAxisIndex: unitIndex,
|
||||
type: 'line',
|
||||
// 曲线平滑设置
|
||||
smooth: issmooth
|
||||
@ -718,11 +799,12 @@
|
||||
var grid = {
|
||||
//left:'20px'
|
||||
// 左侧
|
||||
x: '50px',
|
||||
// x: '50px',
|
||||
x: lightwhite + 'px',
|
||||
// 上部
|
||||
// y: 25,
|
||||
y: 25,
|
||||
// 右侧
|
||||
x2: lightwhite + 'px',
|
||||
x2: 10,
|
||||
// 下部
|
||||
// y2: 35
|
||||
}
|
||||
@ -752,6 +834,16 @@
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
inside: true,
|
||||
//alignWithLabel:true,
|
||||
//interval:'1'
|
||||
},
|
||||
minorTick: {
|
||||
show: true,
|
||||
length: 7,
|
||||
},
|
||||
// splitArea: { show: true }, //保留网格区域
|
||||
// 设置刻度线的颜色等样式
|
||||
axisLine: {
|
||||
@ -766,7 +858,13 @@
|
||||
series: series,
|
||||
tooltip: tooltip,
|
||||
grid: grid,
|
||||
//legend: legend,
|
||||
legend: {
|
||||
data: legend,
|
||||
top: 'top',
|
||||
bottom: 'auto',
|
||||
left: 'center',
|
||||
right: 'auto'
|
||||
},
|
||||
dataZoom: dataZoom,
|
||||
color: color
|
||||
};
|
||||
|
||||
@ -537,7 +537,7 @@
|
||||
//第一条Y轴是否显示轴线
|
||||
const oneAxisLineShow = true;
|
||||
//其他Y轴是否显示轴线
|
||||
const otherAxisLineShow = false;
|
||||
const otherAxisLineShow = true;
|
||||
|
||||
showchart = async function () {
|
||||
//(document.getElementById('echarts-records'), 'walden');
|
||||
|
||||
@ -175,7 +175,8 @@
|
||||
clearTimeout(t); //清除定时器
|
||||
t = null;
|
||||
}
|
||||
|
||||
const CHARTSRGB = ["#8B2252", "#C65911", "#0000EE", "#00F5FF", "#00E5EE", "#27408B", "#FFD700", "#7FFFD4", "#B22222", "#EE7621", "#00C5CD", "#A0522D", "#1E90FF", "#00868B", "#8B4513", "#8B3A3A", "#CD6600", "#CD853F", "#EE7942"
|
||||
, "#D2691E", "#8B008B", "#FFEC8B", "#8B4513", "#CDC673", "#EEEE00", "#FFA500", "#FFD966"];
|
||||
showchart = async function () {
|
||||
//(document.getElementById('echarts-records'), 'walden');
|
||||
var myChart = echarts.init(document.getElementById('result'), 'walden');
|
||||
@ -185,6 +186,20 @@
|
||||
|
||||
var chardatalist = await GetChartsTagValue();
|
||||
|
||||
var unitsrc = new Array();
|
||||
var unitnames = new Array();
|
||||
var unitcolor = new Array();
|
||||
for (var ddi = 0; ddi < StaticSelectTagList.length; ddi++) {
|
||||
var unit_now = StaticSelectTagList[ddi].Units;
|
||||
if (unitsrc.indexOf(unit_now) == -1) {
|
||||
debugger;
|
||||
unitsrc.push(unit_now);
|
||||
// unitnames.push(StaticSelectTagList[ddi].UnitType + "(" + StaticSelectTagList[ddi].Units + ")");
|
||||
unitnames.push(StaticSelectTagList[ddi].Units);
|
||||
unitcolor.push(CHARTSRGB[ddi]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
debugger;
|
||||
myChart.dispose();
|
||||
@ -198,8 +213,8 @@
|
||||
yDataArr.push(ydata);
|
||||
}
|
||||
var lightwhite = 0;
|
||||
if (chardatalist.length > 1) {
|
||||
lightwhite = (chardatalist.length - 1) * 100;
|
||||
if (unitsrc.length > 1) {
|
||||
lightwhite = (unitsrc.length) * 40;
|
||||
}
|
||||
|
||||
//var lightwhite = (chardatalist.length) * 100;
|
||||
@ -210,21 +225,30 @@
|
||||
|
||||
|
||||
var yAxis = new Array();
|
||||
for (var ci = 0; ci < StaticSelectTagList.length; ci++) {
|
||||
var maxYs = unitsrc.length;
|
||||
for (var ci = 0; ci < unitsrc.length; ci++) {
|
||||
if (ci == 0) {
|
||||
let yAxisdata = {
|
||||
name: JSON.parse(JSON.stringify(StaticSelectTagList[ci].Description)),
|
||||
name: JSON.parse(JSON.stringify(unitnames[ci])),
|
||||
nameLocation: 'center',
|
||||
type: 'value',
|
||||
//坐标轴两边留白策略，设置max、min后失效
|
||||
boundaryGap: ['5%', '2%'],
|
||||
scale: true,
|
||||
// scale: true,
|
||||
// max: 700,
|
||||
// min: 0,
|
||||
// 让表格的刻度向靠里侧显示
|
||||
axisTick: {
|
||||
show: true,
|
||||
inside: true
|
||||
},
|
||||
minorTick: {
|
||||
show: true,
|
||||
length: 7,
|
||||
},
|
||||
minorSplitLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
align: 'left',
|
||||
@ -233,8 +257,12 @@
|
||||
// 设置刻度线的颜色等样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: true,
|
||||
onZeroAxisIndex: 0,
|
||||
lineStyle: {
|
||||
color: color[ci],
|
||||
//color: color[ci],
|
||||
|
||||
color: unitcolor[ci],
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
@ -244,28 +272,41 @@
|
||||
// 设置网格为虚线
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
yAxis.push(yAxisdata);
|
||||
}
|
||||
else {
|
||||
let yAxisdata = {
|
||||
name: JSON.parse(JSON.stringify(StaticSelectTagList[ci].Description)),
|
||||
name: JSON.parse(JSON.stringify(unitnames[ci])),
|
||||
nameLocation: 'center',
|
||||
// max: 800,
|
||||
// min: 0,
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
//坐标轴两边留白策略，设置max、min后失效
|
||||
boundaryGap: ['5%', '2%'],
|
||||
axisTick: {
|
||||
show: true,
|
||||
inside: true
|
||||
},
|
||||
minorTick: {
|
||||
show: true,
|
||||
length: 7,
|
||||
},
|
||||
minorSplitLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
align: 'right',
|
||||
align: 'left',
|
||||
verticalAlign: 'bottom',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: color[ci],
|
||||
color: unitcolor[ci],
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
@ -273,7 +314,7 @@
|
||||
show: false //想要不显示网格线，改为false
|
||||
},
|
||||
// 设置坐标轴偏移位置
|
||||
offset: (ci - 1) * 100
|
||||
offset: (ci) * 40
|
||||
//offset: (ci) * 100
|
||||
}
|
||||
yAxis.push(yAxisdata);
|
||||
@ -282,6 +323,15 @@
|
||||
|
||||
var series = new Array();
|
||||
for (var si = 0; si < StaticSelectTagList.length; si++) {
|
||||
var unitIndex = 0;
|
||||
var unitss = StaticSelectTagList[si].Units;
|
||||
for (var ui = 0; ui < unitsrc.length; ui++) {
|
||||
if (unitsrc[ui] == unitss) {
|
||||
unitIndex = ui;
|
||||
break;
|
||||
}
|
||||
}
|
||||
debugger;
|
||||
//bool变量取消平滑采取折线
|
||||
let issmooth = !(StaticSelectTagList[si].Units === 'Y/N')
|
||||
let seriesdata = {
|
||||
@ -290,7 +340,7 @@
|
||||
// 曲线名
|
||||
name: JSON.parse(JSON.stringify(StaticSelectTagList[si].Description)),
|
||||
// 设置参数对应的y坐标轴的索引
|
||||
yAxisIndex: si,
|
||||
yAxisIndex: unitIndex,
|
||||
type: 'line',
|
||||
// 曲线平滑设置
|
||||
smooth: issmooth
|
||||
@ -312,11 +362,13 @@
|
||||
var grid = {
|
||||
//left:'20px'
|
||||
// 左侧
|
||||
x: '50px',
|
||||
//x: '150px',
|
||||
x: lightwhite + 'px',
|
||||
// 上部
|
||||
// y: 25,
|
||||
y: 25,
|
||||
// 右侧
|
||||
x2: lightwhite + 'px',
|
||||
//x2: lightwhite + 'px',
|
||||
x2: 10,
|
||||
// 下部
|
||||
// y2: 35
|
||||
}
|
||||
@ -327,12 +379,19 @@
|
||||
let legenddata = StaticSelectTagList[li].Description;
|
||||
legend.push(JSON.parse(JSON.stringify(legenddata)));
|
||||
}
|
||||
var dataZoom = {
|
||||
var dataZoom = [
|
||||
//type: 'slider'
|
||||
show: false,
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
// show: false,
|
||||
// start: 0,
|
||||
// end: 100
|
||||
{
|
||||
type: 'inside',
|
||||
start: 80,
|
||||
},
|
||||
{
|
||||
type: 'slider'
|
||||
}
|
||||
]
|
||||
|
||||
var option = {
|
||||
xAxis: {
|
||||
@ -348,6 +407,16 @@
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
inside: true,
|
||||
//alignWithLabel:true,
|
||||
//interval:'1'
|
||||
},
|
||||
minorTick: {
|
||||
show: true,
|
||||
length: 7,
|
||||
},
|
||||
// splitArea: { show: true }, //保留网格区域
|
||||
// 设置刻度线的颜色等样式
|
||||
axisLine: {
|
||||
@ -362,7 +431,13 @@
|
||||
series: series,
|
||||
tooltip: tooltip,
|
||||
grid: grid,
|
||||
//legend: legend,
|
||||
legend: {
|
||||
data: legend,
|
||||
top: 'top',
|
||||
bottom: 'auto',
|
||||
left: 'center',
|
||||
right: 'auto'
|
||||
},
|
||||
dataZoom: dataZoom,
|
||||
color: color
|
||||
};
|
||||
@ -410,9 +485,9 @@
|
||||
//axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');//
|
||||
let axisData = RtData[0][0].name;
|
||||
for (var stl = 0; stl < StaticSelectTagList.length; stl++) {
|
||||
if (option.series[stl].data.length > 49) {
|
||||
option.series[stl].data.shift();
|
||||
}
|
||||
// if (option.series[stl].data.length > 49) {
|
||||
// option.series[stl].data.shift();
|
||||
// }
|
||||
option.series[stl].data.push(RtData[stl][0].value);
|
||||
}
|
||||
|
||||
@ -426,10 +501,10 @@
|
||||
|
||||
//data1.shift();
|
||||
//data1.push(Math.round(Math.random() * 20));
|
||||
if (option.xAxis[0].data.length > 49) {
|
||||
option.xAxis[0].data.shift();
|
||||
// if (option.xAxis[0].data.length > 49) {
|
||||
// option.xAxis[0].data.shift();
|
||||
|
||||
}
|
||||
// }
|
||||
option.xAxis[0].data.push(axisData);
|
||||
//option.xAxis[0].data.shift();
|
||||
//option.xAxis[0].data.push(axisData);
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
"LoginMultiple": false, // 是否允许一个账户在多处登录
|
||||
"AllowCorsSite": "http://localhost:8058", // 允许的其他站点访问Api
|
||||
"DBProvider": "SqlServer", //SqlServer //Oracle
|
||||
"DBConnectionString": "Zk48ARnbLq1Lk+lzxvCij1zzENjv04mu23Y8D8hdM3VxApXnvB2iA7xm5JfYWNkbDScUWuGK1+hd9AH5U4eo6l9A0lA/+WhXv9LiWTyuYMFt8OAffhgQu1MWiiwb1GDz8EurwhrLAsGpelKSfZmZGbVTRgW4/RUDv9wtBdQIA11dlm4eCG6zDm9rjJk4f+AM8Pdm1D5aIiWLuRZJXPSkSg==",
|
||||
"DBConnectionString": "Zk48ARnbLq1Lk+lzxvCij+l0UiJ189taFaddb/34UyhBPBAHSDyHdS5dutbRWXGxlB3irVANGspZH0aUGsZNhgOpKckKaqqcVBG/KSADYUGggflobsqEueRv3iuj+qZBa4+vrwj/6cVpUB7juwkiRHCBXFHGcQRd/wAtU6j4XM7gJWyvkLT5x564tsAezSn4MyX/smNuq93X1aONLHhZhA==",
|
||||
"DBCommandTimeout": 180, // 数据库超时时间，单位秒
|
||||
"CacheProvider": "Memory", // 缓存使用方式 Redis/Memory
|
||||
"RedisConnectionString": "127.0.0.1:6379", //docker部署 172.17.0.1
|
||||
@ -34,7 +34,7 @@
|
||||
{
|
||||
"DBNumber": "1",
|
||||
"DBProvider": "SqlServer", //MySql //Oracle
|
||||
"DBConnectionString": "Zk48ARnbLq1Lk+lzxvCij1zzENjv04mu23Y8D8hdM3VxApXnvB2iA7xm5JfYWNkbDScUWuGK1+hd9AH5U4eo6l9A0lA/+WhXv9LiWTyuYMFt8OAffhgQu1MWiiwb1GDz8EurwhrLAsGpelKSfZmZGbVTRgW4/RUDv9wtBdQIA11dlm4eCG6zDm9rjJk4f+AM8Pdm1D5aIiWLuRZJXPSkSg=="
|
||||
"DBConnectionString": "Zk48ARnbLq1Lk+lzxvCij+l0UiJ189taFaddb/34UyhBPBAHSDyHdS5dutbRWXGxlB3irVANGspZH0aUGsZNhgOpKckKaqqcVBG/KSADYUGggflobsqEueRv3iuj+qZBa4+vrwj/6cVpUB7juwkiRHCBXFHGcQRd/wAtU6j4XM7gJWyvkLT5x564tsAezSn4MyX/smNuq93X1aONLHhZhA=="
|
||||
}
|
||||
],
|
||||
"RabbitMq": {
|
||||
|
||||
Reference in New Issue
Block a user