/* eslint-disable max-len,object-curly-newline */ import dayjs from 'dayjs'; import max from 'lodash/max'; import isNaN from 'lodash/isNaN'; import { colors, generateDefaultSeries, legendData, yAxisData } from '@/config/chart'; /** * 生成chart所需参数 * @param {Object[]} data 服务端返回数据 * @param {string} data[].time 时间 ms * @param {string} data[].so2 SO2 * @param {string} data[].saltR 盐阻 * @param {string} data[].saltT 盐温 * @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: *[], corrosionTONG: *[], so2: *[], corrosionLV: *[], time: *[], saltT: *[], saltR: *[], environmentHumidity: *[]}} */ function generateParams(data) { const result = { time: [], so2: [], saltR: [], saltT: [], environmentTemperature: [], environmentHumidity: [], corrosionXIN: [], corrosionTONG: [], corrosionLV: [], corrosionGANG: [], }; data.forEach(item => { result.time.push(dayjs(new Date(+item.time)).format('YY/MM/DD HH:mm')); !isNaN(+item.so2) ? result.so2.push(+item.so2) : ''; !isNaN(+item.saltR) ? result.saltR.push(+item.saltR) : ''; !isNaN(+item.saltT) ? result.saltT.push(+item.saltT) : ''; !isNaN(+item.environmentTemperature) ? result.environmentTemperature.push(+item.environmentTemperature) : ''; !isNaN(+item.environmentHumidity) ? result.environmentHumidity.push(+item.environmentHumidity) : ''; !isNaN(+item.corrosion1) ? result.corrosionXIN.push(+item.corrosion1) : ''; !isNaN(+item.corrosion2) ? result.corrosionTONG.push(+item.corrosion2) : ''; !isNaN(+item.corrosion3) ? result.corrosionLV.push(+item.corrosion3) : ''; !isNaN(+item.corrosion4) ? result.corrosionGANG.push(+item.corrosion4) : ''; }); return result; } /** * 计算Y轴的显示 * @param {string} yName Y轴的name * @param {Object} selectedLegend legends * @returns {boolean} */ export function computeYAxisShow(yName, selectedLegend) { // eslint-disable-next-line guard-for-in,no-restricted-syntax for (const key in selectedLegend) { if (key.includes(yName) && selectedLegend[key]) { return true; } } return false; } /** * 生产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) { let leftIndex = 0; let rightIndex = 0; yAxisData.forEach(item => { item.show = computeYAxisShow(item.name, selectedLegend); if (item.show) { if (item.position === 'left') { item.offset = 100 * leftIndex; leftIndex += 1; } else { item.offset = 80 * rightIndex; rightIndex += 1; } } }); return yAxisData; } /** * 生成series数据 * @param {Object} data * @param {Object[]} yAxis * @returns {({data: ([]|number|string|*), name: string, type: string}|{data: ([]|number|BufferSource|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: [], name: string, type: string, yAxisIndex: number})[]|*[]} */ function generateSeries(data, yAxis) { const seriesArr = generateDefaultSeries(data); const showArr = seriesArr.filter(item => yAxis.find(y => y.name === item.name)); const hideArr = seriesArr.filter(item => !yAxis.find(y => y.name === item.name)); const result = [...showArr, ...hideArr]; result.forEach(item => { if (item.name.includes('电流')) { item.yAxisIndex = 0; } else if (item.name.includes('温度')) { item.yAxisIndex = 1; } else if (item.name.includes('湿度')) { item.yAxisIndex = 2; } else if (item.name.includes('SO2')) { item.yAxisIndex = 3; } else if (item.name.includes('阻抗')) { item.yAxisIndex = 4; } }); return result || []; } /** * 计算图表grid left right值 * @param {Object[]} yAxis * @returns {{left: number, right: number}} */ function generateGrid(yAxis) { const left = []; const right = []; yAxis.forEach(item => { if (item.show) { if (item.position === 'left') { left.push(item.offset || 0); } else { right.push(item.offset || 0); } } }); return { left: max(left) + 100, right: max(right) + 80, }; } /** * 生成chart参数 * @param {Object[]} rawData 返回段返回的data数据 * @param {Object} selected 选中的legend * @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})[], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: [string,string,string,string,string,string,string,string,string], grid: {left: number, right: number}, legend: {data: [string,string,string,string,string,string,string,string,string], type: string, selected}, series: (({data: ([]|number|string|*), name: string, type: string}|{data: ([]|number|BufferSource|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: [], name: string, type: string, yAxisIndex: number})[]|*[]), tooltip: {axisPointer: {type: string, snap: boolean}, trigger: string}, dataZoom: [{type: string},{type: string}]}} */ export function generateChartOption(rawData, selected) { const data = generateParams(rawData); const yAxis = generateYAxis(selected); const series = generateSeries(data, yAxis); const grid = generateGrid(yAxis); const option = { color: colors, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', snap: true, }, }, grid, legend: { type: 'scroll', selected, data: legendData, }, dataZoom: [{ type: 'inside' }, { type: 'slider' }], xAxis: [ { type: 'category', axisTick: { alignWithLabel: true }, data: data.time, }, ], yAxis, series, }; return option; }