新兴全变量曲线合并坐标轴
This commit is contained in:
dell
@ -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);
|
||||
|
||||
Reference in New Issue
Block a user