You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
251 lines
8.5 KiB
251 lines
8.5 KiB
/* eslint-disable max-len,object-curly-newline */
|
|
import dayjs from 'dayjs';
|
|
|
|
const colors = ['#5470C6', '#91CC75', '#EE6666', '#5470C6', '#91CC75', '#EE6666', '#5470C6', '#91CC75'];
|
|
|
|
/**
|
|
* 生成chart所需参数
|
|
* @param {Object[]} data 服务端返回数据
|
|
* @param {string} data[].time 时间 ms
|
|
* @param {string} data[].so2 SO2
|
|
* @param {string} data[].salt 盐阻
|
|
* @param {string} data[].environmentTemperature 环温
|
|
* @param {string} data[].environmentHumidity 环湿
|
|
* @param {string} data[].corrosion1 锌
|
|
* @param {string} data[].corrosion2 铜
|
|
* @param {string} data[].corrosion3 铝
|
|
* @param {string} data[].corrosion4 钢
|
|
* @returns {{environmentTemperature: *[], corrosionXIN: *[], corrosionGANG: *[], salt: *[], corrosionTONG: *[], so2: *[], corrosionLV: *[], time: *[], environmentHumidity: *[]}}
|
|
*/
|
|
function generateParams(data) {
|
|
const result = {
|
|
time: [],
|
|
so2: [],
|
|
salt: [],
|
|
environmentTemperature: [],
|
|
environmentHumidity: [],
|
|
corrosionXIN: [],
|
|
corrosionTONG: [],
|
|
corrosionLV: [],
|
|
corrosionGANG: [],
|
|
};
|
|
data.forEach(item => {
|
|
result.time.push(dayjs(+item.time).format('YY/MM/MM HH:mm'));
|
|
result.so2.push(+item.so2);
|
|
result.salt.push(+item.salt);
|
|
result.environmentTemperature.push(+item.environmentTemperature);
|
|
result.environmentHumidity.push(+item.environmentHumidity);
|
|
result.corrosionXIN.push(+item.corrosion1);
|
|
result.corrosionTONG.push(+item.corrosion2);
|
|
result.corrosionLV.push(+item.corrosion3);
|
|
result.corrosionGANG.push(+item.corrosion4);
|
|
});
|
|
return result;
|
|
}
|
|
|
|
const yAxisData = [
|
|
{
|
|
type: 'value',
|
|
name: 'SO2(ppb)',
|
|
position: 'left',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: { color: colors[0] },
|
|
},
|
|
axisLabel: { formatter: '{value}ppb' },
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '盐分阻抗(Ω)',
|
|
// min: 0,
|
|
// max: 250,
|
|
position: 'left',
|
|
offset: 70,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: { color: colors[1] },
|
|
},
|
|
axisLabel: { formatter: '{value}Ω' },
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '环温(℃)',
|
|
// min: 0,
|
|
// max: 25,
|
|
position: 'left',
|
|
offset: 135,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: { color: colors[2] },
|
|
},
|
|
axisLabel: { formatter: '{value}°C' },
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '环湿(RH%)',
|
|
// min: 0,
|
|
// max: 25,
|
|
position: 'left',
|
|
offset: 200,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: { color: colors[3] },
|
|
},
|
|
axisLabel: { formatter: '{value}RH%' },
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '锌腐蚀电流(nA)',
|
|
position: 'right',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: { color: colors[4] },
|
|
},
|
|
axisLabel: { formatter: '{value}' },
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '铜腐蚀电流(nA)',
|
|
offset: 100,
|
|
position: 'right',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: { color: colors[5] },
|
|
},
|
|
axisLabel: { formatter: '{value}' },
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '铝腐蚀电流(nA)',
|
|
offset: 200,
|
|
position: 'right',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: { color: colors[6] },
|
|
},
|
|
axisLabel: { formatter: '{value}' },
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '钢腐蚀电流(nA)',
|
|
offset: 300,
|
|
position: 'right',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: { color: colors[7] },
|
|
},
|
|
axisLabel: { formatter: '{value}' },
|
|
},
|
|
];
|
|
|
|
/**
|
|
* 生产y轴内容
|
|
* @param {Object} selectedLegend
|
|
* @returns {({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[]}
|
|
*/
|
|
export function generateYAxis(selectedLegend) {
|
|
console.log(selectedLegend);
|
|
return yAxisData.filter(item => selectedLegend[item.name]);
|
|
}
|
|
|
|
/**
|
|
* 生成初始状态的y轴
|
|
* @returns {({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[]}
|
|
*/
|
|
export function generateDefaultYAxis() {
|
|
const selectedLegend = [
|
|
{
|
|
'钢腐蚀电流(nA)': true,
|
|
'铜腐蚀电流(nA)': true,
|
|
'铝腐蚀电流(nA)': true,
|
|
'锌腐蚀电流(nA)': true,
|
|
},
|
|
];
|
|
return yAxisData.filter(item => selectedLegend.find(selected => selected[item.name]));
|
|
}
|
|
|
|
/**
|
|
* 生成chart参数
|
|
* @param {Object[]} rawData 返回段返回的data数据
|
|
* @param {Object[]} yAxis
|
|
* @returns {{yAxis: [{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},null,null,null], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: string[], grid: {right: string}, legend: {data: string[]}, series: [{data: *[], name: string, type: string},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},null,null,null], tooltip: {axisPointer: {type: string}, trigger: string}, toolbox: {feature: {saveAsImage: {show: boolean}, restore: {show: boolean}, dataView: {show: boolean, readOnly: boolean}}}}}
|
|
*/
|
|
// eslint-disable-next-line import/prefer-default-export
|
|
export function generateChartOption(rawData, yAxis) {
|
|
console.log(yAxis);
|
|
const data = generateParams(rawData);
|
|
const option = {
|
|
color: colors,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'cross' },
|
|
},
|
|
grid: {
|
|
right: '30%',
|
|
left: '20%',
|
|
},
|
|
legend: {
|
|
data: ['SO2(ppb)', '盐分阻抗(Ω)', '环温(℃)', '环湿(RH%)', '锌腐蚀电流(nA)', '铜腐蚀电流(nA)', '铝腐蚀电流(nA)', '钢腐蚀电流(nA)'],
|
|
},
|
|
dataZoom: [{ type: 'inside' }, { type: 'slider' }],
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: { alignWithLabel: true },
|
|
data: data.time,
|
|
},
|
|
],
|
|
yAxis: yAxisData,
|
|
series: [
|
|
{
|
|
name: 'SO2(ppb)',
|
|
type: 'line',
|
|
data: data.so2,
|
|
},
|
|
{
|
|
name: '盐分阻抗(Ω)',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: data.salt,
|
|
},
|
|
{
|
|
name: '环温(℃)',
|
|
type: 'line',
|
|
yAxisIndex: 2,
|
|
data: data.environmentTemperature,
|
|
},
|
|
{
|
|
name: '环湿(RH%)',
|
|
type: 'line',
|
|
yAxisIndex: 3,
|
|
data: data.environmentHumidity,
|
|
},
|
|
{
|
|
name: '锌腐蚀电流(nA)',
|
|
type: 'line',
|
|
yAxisIndex: 4,
|
|
data: data.corrosionXIN,
|
|
},
|
|
{
|
|
name: '铜腐蚀电流(nA)',
|
|
type: 'line',
|
|
yAxisIndex: 5,
|
|
data: data.corrosionTONG,
|
|
},
|
|
{
|
|
name: '铝腐蚀电流(nA)',
|
|
type: 'line',
|
|
yAxisIndex: 6,
|
|
data: data.corrosionLV,
|
|
},
|
|
{
|
|
name: '钢腐蚀电流(nA)',
|
|
type: 'line',
|
|
yAxisIndex: 7,
|
|
data: data.corrosionGANG,
|
|
},
|
|
],
|
|
};
|
|
|
|
return option;
|
|
}
|
|
|