/* eslint-disable max-len,object-curly-newline */ import dayjs from 'dayjs'; import max from 'lodash/max'; import { colors, defaultSelectedLegend, generateDefaultSeries, yAxisData } from '@/config/chart'; /** * 生成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; } /** * 生产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 = selectedLegend[item.name]; if (item.show) { if (item.position === 'left') { item.offset = 70 * leftIndex; leftIndex += 1; } else { item.offset = 85 * 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, index) => { item.yAxisIndex = index; }); return result || []; } /** * 计算图表grid left right值 * @param {Object[]} yAxis * @returns {{left: number, right: number}} */ function genereteGrid(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) + 45, right: max(right) + 45, }; } /** * 生成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, selected = defaultSelectedLegend) { const data = generateParams(rawData); const yAxis = generateYAxis(selected); const series = generateSeries(data, yAxis); const grid = genereteGrid(yAxis); const option = { color: colors, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', snap: true, }, }, grid, legend: { selected, data: ['SO2(ppb)', '盐分阻抗(Ω)', '环温(℃)', '环湿(RH%)', '锌腐蚀电流(nA)', '铜腐蚀电流(nA)', '铝腐蚀电流(nA)', '钢腐蚀电流(nA)'], }, dataZoom: [{ type: 'inside' }, { type: 'slider' }], xAxis: [ { type: 'category', axisTick: { alignWithLabel: true }, data: data.time, }, ], yAxis, series, }; return option; }