From ea046c952ef569de1ddc58d282f25e5dd4517b84 Mon Sep 17 00:00:00 2001 From: dell Date: Thu, 17 Oct 2024 14:00:53 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=85=B4=E5=85=A8=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E6=9B=B2=E7=BA=BF=E5=90=88=E5=B9=B6=E5=9D=90=E6=A0=87=E8=BD=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Views/PenMeiHistoryCharts/Index.cshtml | 142 +++++++++++++++--- .../PenMeiHistoryTechCharts/Index.cshtml | 2 +- .../Views/PenMeiRtcharts/Index.cshtml | 131 ++++++++++++---- HT.Cloud.Web/appsettings.json | 4 +- 4 files changed, 226 insertions(+), 53 deletions(-) diff --git a/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiHistoryCharts/Index.cshtml b/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiHistoryCharts/Index.cshtml index 065fb97..a88933d 100644 --- a/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiHistoryCharts/Index.cshtml +++ b/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiHistoryCharts/Index.cshtml @@ -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 }; diff --git a/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiHistoryTechCharts/Index.cshtml b/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiHistoryTechCharts/Index.cshtml index 188301a..3611e7d 100644 --- a/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiHistoryTechCharts/Index.cshtml +++ b/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiHistoryTechCharts/Index.cshtml @@ -537,7 +537,7 @@ //第一条Y轴是否显示轴线 const oneAxisLineShow = true; //其他Y轴是否显示轴线 - const otherAxisLineShow = false; + const otherAxisLineShow = true; showchart = async function () { //(document.getElementById('echarts-records'), 'walden'); diff --git a/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiRtcharts/Index.cshtml b/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiRtcharts/Index.cshtml index 8dc342c..4c6e3f3 100644 --- a/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiRtcharts/Index.cshtml +++ b/HT.Cloud.Web/Areas/PenMeiChartsManage/Views/PenMeiRtcharts/Index.cshtml @@ -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); diff --git a/HT.Cloud.Web/appsettings.json b/HT.Cloud.Web/appsettings.json index 545398f..127b33a 100644 --- a/HT.Cloud.Web/appsettings.json +++ b/HT.Cloud.Web/appsettings.json @@ -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": {