cdl/HTCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新兴全变量曲线合并坐标轴

Browse Source
This commit is contained in:
dell
2024-10-17 14:00:53 +08:00
parent 1a753029ba
commit ea046c952e
4 changed files with 226 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiHistoryCharts/Index.cshtml
View File

@ -580,7 +580,12 @@
return chardatalist; return chardatalist;
} }
//true
//false
//第一条Y轴是否显示轴线
const oneAxisLineShow = true;
//其他Y轴是否显示轴线
const otherAxisLineShow = true;
showchart = async function () { showchart = async function () {
//(document.getElementById('echarts-records'), 'walden'); //(document.getElementById('echarts-records'), 'walden');
@ -591,12 +596,47 @@
var chardatalist = await GetChartsTagValue(); 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; debugger;
myChart.dispose(); myChart.dispose();
var xDataArr = new Array(); var xDataArr = new Array();
var yDataArr = new Array(); var yDataArr = new Array();
var maxArr = new Array();
var minArr = new Array();
for (var listindex = 0; listindex < chardatalist.length; listindex++) { for (var listindex = 0; listindex < chardatalist.length; listindex++) {
let ydata = chardatalist[listindex].map(x => { return x.value }); let ydata = chardatalist[listindex].map(x => { return x.value });
let xdata = chardatalist[listindex].map(x => { return x.name }); let xdata = chardatalist[listindex].map(x => { return x.name });
@ -604,8 +644,8 @@
yDataArr.push(ydata); yDataArr.push(ydata);
} }
var lightwhite = 0; var lightwhite = 0;
if (chardatalist.length > 1) { if (unitsrc.length > 1) {
lightwhite = (chardatalist.length - 1) * 100; lightwhite = (unitsrc.length) * 40;
} }
//var lightwhite = (chardatalist.length) * 100; //var lightwhite = (chardatalist.length) * 100;
@ -616,11 +656,17 @@
var yAxis = new Array(); 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) { if (ci == 0) {
let yAxisdata = { let yAxisdata = {
name: JSON.parse(JSON.stringify(StaticSelectTagList[ci].Description)), name: JSON.parse(JSON.stringify(unitnames[ci])),
nameLocation: 'center', nameLocation: 'center',
nameGap: 5,
nameRotate: 270,
max: maxArr[ci],
min: minArr[ci],
interval: intervalArr[ci],
type: 'value', type: 'value',
//坐标轴两边留白策略，设置max、min后失效 //坐标轴两边留白策略，设置max、min后失效
boundaryGap: ['5%', '2%'], boundaryGap: ['5%', '2%'],
@ -628,18 +674,31 @@
// min: 0, // min: 0,
// 让表格的刻度向靠里侧显示 // 让表格的刻度向靠里侧显示
axisTick: { axisTick: {
inside: true show: true,
inside: false,
length: 9,
},
minorTick: {
show: true,
length: 5,
},
minorSplitLine: {
show: true,
}, },
axisLabel: { axisLabel: {
inside: true, inside: true,
align: 'left', align: 'right',
verticalAlign: 'bottom', verticalAlign: 'bottom',
}, },
// 设置刻度线的颜色等样式 // 设置刻度线的颜色等样式
axisLine: { axisLine: {
show: true, show: oneAxisLineShow,
onZero: true,
onZeroAxisIndex: 0,
lineStyle: { lineStyle: {
color: CHARTSRGB[ci], //color: color[ci],
color: unitcolor[ci],
width: 3 width: 3
} }
}, },
@ -655,30 +714,44 @@
} }
else { else {
let yAxisdata = { let yAxisdata = {
name: JSON.parse(JSON.stringify(StaticSelectTagList[ci].Description)), name: JSON.parse(JSON.stringify(unitnames[ci])),
nameLocation: 'center', nameLocation: 'center',
// max: 800, nameGap: 5,
// min: 0, nameRotate: 270,
max: maxArr[ci],
min: minArr[ci],
interval: intervalArr[ci],
type: 'value', type: 'value',
position: 'left',
//坐标轴两边留白策略，设置max、min后失效 //坐标轴两边留白策略，设置max、min后失效
boundaryGap: ['5%', '2%'], boundaryGap: ['5%', '2%'],
axisTick: {
show: true,
inside: false,
length: 9,
},
minorSplitLine: {
show: true,
},
axisLabel: { axisLabel: {
inside: true, inside: false,
align: 'right', align: 'right',
verticalAlign: 'bottom', verticalAlign: 'bottom',
}, },
axisLine: { axisLine: {
show: true, show: otherAxisLineShow,
onZero: false,
lineStyle: { lineStyle: {
color: CHARTSRGB[ci], //color: color[ci],
color: unitcolor[ci],
width: 3 width: 3
} }
}, },
splitLine: { splitLine: {
show: false //想要不显示网格线，改为false show: true //想要不显示网格线，改为false
}, },
// 设置坐标轴偏移位置 // 设置坐标轴偏移位置
offset: (ci - 1) * 100 offset: (ci) * 40
//offset: (ci) * 100 //offset: (ci) * 100
} }
yAxis.push(yAxisdata); yAxis.push(yAxisdata);
@ -687,6 +760,14 @@
var series = new Array(); var series = new Array();
for (var si = 0; si < StaticSelectTagList.length; si++) { 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; debugger;
//bool变量取消平滑采取折线 //bool变量取消平滑采取折线
let issmooth = !(StaticSelectTagList[si].Units ==='Y/N') let issmooth = !(StaticSelectTagList[si].Units ==='Y/N')
@ -696,7 +777,7 @@
// 曲线名 // 曲线名
name: JSON.parse(JSON.stringify(StaticSelectTagList[si].Description)), name: JSON.parse(JSON.stringify(StaticSelectTagList[si].Description)),
// 设置参数对应的y坐标轴的索引 // 设置参数对应的y坐标轴的索引
yAxisIndex: si, yAxisIndex: unitIndex,
type: 'line', type: 'line',
// 曲线平滑设置 // 曲线平滑设置
smooth: issmooth smooth: issmooth
@ -718,11 +799,12 @@
var grid = { var grid = {
//left:'20px' //left:'20px'
// 左侧 // 左侧
x: '50px', // x: '50px',
x: lightwhite + 'px',
// 上部 // 上部
// y: 25, y: 25,
// 右侧 // 右侧
x2: lightwhite + 'px', x2: 10,
// 下部 // 下部
// y2: 35 // y2: 35
} }
@ -752,6 +834,16 @@
type: 'dashed' type: 'dashed'
} }
}, },
axisTick: {
show: true,
inside: true,
//alignWithLabel:true,
//interval:'1'
},
minorTick: {
show: true,
length: 7,
},
// splitArea: { show: true }, //保留网格区域 // splitArea: { show: true }, //保留网格区域
// 设置刻度线的颜色等样式 // 设置刻度线的颜色等样式
axisLine: { axisLine: {
@ -766,7 +858,13 @@
series: series, series: series,
tooltip: tooltip, tooltip: tooltip,
grid: grid, grid: grid,
//legend: legend, legend: {
data: legend,
top: 'top',
bottom: 'auto',
left: 'center',
right: 'auto'
},
dataZoom: dataZoom, dataZoom: dataZoom,
color: color color: color
}; };

2
HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiHistoryTechCharts/Index.cshtml
View File

@ -537,7 +537,7 @@
//第一条Y轴是否显示轴线 //第一条Y轴是否显示轴线
const oneAxisLineShow = true; const oneAxisLineShow = true;
//其他Y轴是否显示轴线 //其他Y轴是否显示轴线
const otherAxisLineShow = false; const otherAxisLineShow = true;
showchart = async function () { showchart = async function () {
//(document.getElementById('echarts-records'), 'walden'); //(document.getElementById('echarts-records'), 'walden');

131
HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiRtcharts/Index.cshtml
View File

@ -175,7 +175,8 @@
clearTimeout(t); //清除定时器 clearTimeout(t); //清除定时器
t = null; 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 () { showchart = async function () {
//(document.getElementById('echarts-records'), 'walden'); //(document.getElementById('echarts-records'), 'walden');
var myChart = echarts.init(document.getElementById('result'), 'walden'); var myChart = echarts.init(document.getElementById('result'), 'walden');
@ -185,6 +186,20 @@
var chardatalist = await GetChartsTagValue(); 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; debugger;
myChart.dispose(); myChart.dispose();
@ -198,8 +213,8 @@
yDataArr.push(ydata); yDataArr.push(ydata);
} }
var lightwhite = 0; var lightwhite = 0;
if (chardatalist.length > 1) { if (unitsrc.length > 1) {
lightwhite = (chardatalist.length - 1) * 100; lightwhite = (unitsrc.length) * 40;
} }
//var lightwhite = (chardatalist.length) * 100; //var lightwhite = (chardatalist.length) * 100;
@ -210,21 +225,30 @@
var yAxis = new Array(); 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) { if (ci == 0) {
let yAxisdata = { let yAxisdata = {
name: JSON.parse(JSON.stringify(StaticSelectTagList[ci].Description)), name: JSON.parse(JSON.stringify(unitnames[ci])),
nameLocation: 'center', nameLocation: 'center',
type: 'value', type: 'value',
//坐标轴两边留白策略，设置max、min后失效 //坐标轴两边留白策略，设置max、min后失效
boundaryGap: ['5%', '2%'], boundaryGap: ['5%', '2%'],
scale: true, // scale: true,
// max: 700, // max: 700,
// min: 0, // min: 0,
// 让表格的刻度向靠里侧显示 // 让表格的刻度向靠里侧显示
axisTick: { axisTick: {
show: true,
inside: true inside: true
}, },
minorTick: {
show: true,
length: 7,
},
minorSplitLine: {
show: true,
},
axisLabel: { axisLabel: {
inside: true, inside: true,
align: 'left', align: 'left',
@ -233,8 +257,12 @@
// 设置刻度线的颜色等样式 // 设置刻度线的颜色等样式
axisLine: { axisLine: {
show: true, show: true,
onZero: true,
onZeroAxisIndex: 0,
lineStyle: { lineStyle: {
color: color[ci], //color: color[ci],
color: unitcolor[ci],
width: 3 width: 3
} }
}, },
@ -244,28 +272,41 @@
// 设置网格为虚线 // 设置网格为虚线
type: 'dashed' type: 'dashed'
} }
} },
} }
yAxis.push(yAxisdata); yAxis.push(yAxisdata);
} }
else { else {
let yAxisdata = { let yAxisdata = {
name: JSON.parse(JSON.stringify(StaticSelectTagList[ci].Description)), name: JSON.parse(JSON.stringify(unitnames[ci])),
nameLocation: 'center', nameLocation: 'center',
// max: 800, // max: 800,
// min: 0, // min: 0,
type: 'value', type: 'value',
position: 'left',
//坐标轴两边留白策略，设置max、min后失效 //坐标轴两边留白策略，设置max、min后失效
boundaryGap: ['5%', '2%'], boundaryGap: ['5%', '2%'],
axisTick: {
show: true,
inside: true
},
minorTick: {
show: true,
length: 7,
},
minorSplitLine: {
show: true,
},
axisLabel: { axisLabel: {
inside: true, inside: true,
align: 'right', align: 'left',
verticalAlign: 'bottom', verticalAlign: 'bottom',
}, },
axisLine: { axisLine: {
show: true, show: true,
onZero: false,
lineStyle: { lineStyle: {
color: color[ci], color: unitcolor[ci],
width: 3 width: 3
} }
}, },
@ -273,7 +314,7 @@
show: false //想要不显示网格线，改为false show: false //想要不显示网格线，改为false
}, },
// 设置坐标轴偏移位置 // 设置坐标轴偏移位置
offset: (ci - 1) * 100 offset: (ci) * 40
//offset: (ci) * 100 //offset: (ci) * 100
} }
yAxis.push(yAxisdata); yAxis.push(yAxisdata);
@ -282,6 +323,15 @@
var series = new Array(); var series = new Array();
for (var si = 0; si < StaticSelectTagList.length; si++) { 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变量取消平滑采取折线 //bool变量取消平滑采取折线
let issmooth = !(StaticSelectTagList[si].Units === 'Y/N') let issmooth = !(StaticSelectTagList[si].Units === 'Y/N')
let seriesdata = { let seriesdata = {
@ -290,7 +340,7 @@
// 曲线名 // 曲线名
name: JSON.parse(JSON.stringify(StaticSelectTagList[si].Description)), name: JSON.parse(JSON.stringify(StaticSelectTagList[si].Description)),
// 设置参数对应的y坐标轴的索引 // 设置参数对应的y坐标轴的索引
yAxisIndex: si, yAxisIndex: unitIndex,
type: 'line', type: 'line',
// 曲线平滑设置 // 曲线平滑设置
smooth: issmooth smooth: issmooth
@ -312,11 +362,13 @@
var grid = { var grid = {
//left:'20px' //left:'20px'
// 左侧 // 左侧
x: '50px', //x: '150px',
x: lightwhite + 'px',
// 上部 // 上部
// y: 25, y: 25,
// 右侧 // 右侧
x2: lightwhite + 'px', //x2: lightwhite + 'px',
x2: 10,
// 下部 // 下部
// y2: 35 // y2: 35
} }
@ -327,12 +379,19 @@
let legenddata = StaticSelectTagList[li].Description; let legenddata = StaticSelectTagList[li].Description;
legend.push(JSON.parse(JSON.stringify(legenddata))); legend.push(JSON.parse(JSON.stringify(legenddata)));
} }
var dataZoom = { var dataZoom = [
//type: 'slider' //type: 'slider'
show: false, // show: false,
start: 0, // start: 0,
end: 100 // end: 100
} {
type: 'inside',
start: 80,
},
{
type: 'slider'
}
]
var option = { var option = {
xAxis: { xAxis: {
@ -348,6 +407,16 @@
type: 'dashed' type: 'dashed'
} }
}, },
axisTick: {
show: true,
inside: true,
//alignWithLabel:true,
//interval:'1'
},
minorTick: {
show: true,
length: 7,
},
// splitArea: { show: true }, //保留网格区域 // splitArea: { show: true }, //保留网格区域
// 设置刻度线的颜色等样式 // 设置刻度线的颜色等样式
axisLine: { axisLine: {
@ -362,7 +431,13 @@
series: series, series: series,
tooltip: tooltip, tooltip: tooltip,
grid: grid, grid: grid,
//legend: legend, legend: {
data: legend,
top: 'top',
bottom: 'auto',
left: 'center',
right: 'auto'
},
dataZoom: dataZoom, dataZoom: dataZoom,
color: color color: color
}; };
@ -410,9 +485,9 @@
//axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');// //axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');//
let axisData = RtData[0][0].name; let axisData = RtData[0][0].name;
for (var stl = 0; stl < StaticSelectTagList.length; stl++) { for (var stl = 0; stl < StaticSelectTagList.length; stl++) {
if (option.series[stl].data.length > 49) { // if (option.series[stl].data.length > 49) {
option.series[stl].data.shift(); // option.series[stl].data.shift();
} // }
option.series[stl].data.push(RtData[stl][0].value); option.series[stl].data.push(RtData[stl][0].value);
} }
@ -426,10 +501,10 @@
//data1.shift(); //data1.shift();
//data1.push(Math.round(Math.random() * 20)); //data1.push(Math.round(Math.random() * 20));
if (option.xAxis[0].data.length > 49) { // if (option.xAxis[0].data.length > 49) {
option.xAxis[0].data.shift(); // option.xAxis[0].data.shift();
} // }
option.xAxis[0].data.push(axisData); option.xAxis[0].data.push(axisData);
//option.xAxis[0].data.shift(); //option.xAxis[0].data.shift();
//option.xAxis[0].data.push(axisData); //option.xAxis[0].data.push(axisData);

4
HT.Cloud.Web/appsettings.json
View File

@ -13,7 +13,7 @@
"LoginMultiple": false, // 是否允许一个账户在多处登录 "LoginMultiple": false, // 是否允许一个账户在多处登录
"AllowCorsSite": "http://localhost:8058", // 允许的其他站点访问Api "AllowCorsSite": "http://localhost:8058", // 允许的其他站点访问Api
"DBProvider": "SqlServer", //SqlServer //Oracle "DBProvider": "SqlServer", //SqlServer //Oracle
"DBConnectionString": "Zk48ARnbLq1Lk+lzxvCij1zzENjv04mu23Y8D8hdM3VxApXnvB2iA7xm5JfYWNkbDScUWuGK1+hd9AH5U4eo6l9A0lA/+WhXv9LiWTyuYMFt8OAffhgQu1MWiiwb1GDz8EurwhrLAsGpelKSfZmZGbVTRgW4/RUDv9wtBdQIA11dlm4eCG6zDm9rjJk4f+AM8Pdm1D5aIiWLuRZJXPSkSg==", "DBConnectionString": "Zk48ARnbLq1Lk+lzxvCij+l0UiJ189taFaddb/34UyhBPBAHSDyHdS5dutbRWXGxlB3irVANGspZH0aUGsZNhgOpKckKaqqcVBG/KSADYUGggflobsqEueRv3iuj+qZBa4+vrwj/6cVpUB7juwkiRHCBXFHGcQRd/wAtU6j4XM7gJWyvkLT5x564tsAezSn4MyX/smNuq93X1aONLHhZhA==",
"DBCommandTimeout": 180, // 数据库超时时间，单位秒 "DBCommandTimeout": 180, // 数据库超时时间，单位秒
"CacheProvider": "Memory", // 缓存使用方式 Redis/Memory "CacheProvider": "Memory", // 缓存使用方式 Redis/Memory
"RedisConnectionString": "127.0.0.1:6379", //docker部署 172.17.0.1 "RedisConnectionString": "127.0.0.1:6379", //docker部署 172.17.0.1
@ -34,7 +34,7 @@
{ {
"DBNumber": "1", "DBNumber": "1",
"DBProvider": "SqlServer", //MySql //Oracle "DBProvider": "SqlServer", //MySql //Oracle
"DBConnectionString": "Zk48ARnbLq1Lk+lzxvCij1zzENjv04mu23Y8D8hdM3VxApXnvB2iA7xm5JfYWNkbDScUWuGK1+hd9AH5U4eo6l9A0lA/+WhXv9LiWTyuYMFt8OAffhgQu1MWiiwb1GDz8EurwhrLAsGpelKSfZmZGbVTRgW4/RUDv9wtBdQIA11dlm4eCG6zDm9rjJk4f+AM8Pdm1D5aIiWLuRZJXPSkSg==" "DBConnectionString": "Zk48ARnbLq1Lk+lzxvCij+l0UiJ189taFaddb/34UyhBPBAHSDyHdS5dutbRWXGxlB3irVANGspZH0aUGsZNhgOpKckKaqqcVBG/KSADYUGggflobsqEueRv3iuj+qZBa4+vrwj/6cVpUB7juwkiRHCBXFHGcQRd/wAtU6j4XM7gJWyvkLT5x564tsAezSn4MyX/smNuq93X1aONLHhZhA=="
} }
], ],
"RabbitMq": { "RabbitMq": {