新兴全变量曲线合并坐标轴
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
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user