farm-nuxt3/utils/complexChart.js

/* eslint-disable max-len,object-curly-newline */
import _ from 'lodash';
import {
  colors,
  generateDefaultSeries,
  itemColor,
  legendData,
  yAxisData,
} from './complexConfig';

/**
 * 生成chart所需参数
 * @param {Object[]} data 服务端返回数据
 * @returns {{environmentTemperature: *[], corrosionXIN: *[], corrosionGANG: *[], corrosionTONG: *[], so2: *[], corrosionLV: *[], time: *[], saltT: *[], saltR: *[], environmentHumidity: *[]}}
 */
function generateParams(data) {
  const result = {
    time: [],
    roomT: [],
    roomH: [],
    outT: [],
    outH: [],
    soilT: [],
    soilH: [],
    windSpeed: [],
    co2: [],
    light: [],
  };
  data.forEach(item => {
    result.time.push(item.time);
    result.roomT.push(+item.roomT);
    result.roomH.push(+item.roomH);
    result.outT.push(+item.outT);
    result.outH.push(+item.outH);
    result.soilT.push(+item.soilT);
    result.soilH.push(+item.soilH);
    result.windSpeed.push(+item.windSpeed);
    result.co2.push(+item.co2);
    result.light.push(+item.light);
  });
  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 = 40 * leftIndex;
        leftIndex += 1;
      } else {
        item.offset = 40 * 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 => {
    item.itemStyle = { color: itemColor[item.name] };
    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('CO2')) {
      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) + 40,
    right: _.max(right) + 40,
    bottom: 20,
  };
}

/**
 * 生成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);
  return {
    color: colors,
    darkMode: true,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        snap: true,
      },
    },
    grid,
    legend: {
      type: 'scroll',
      textStyle: { color: '#fff' },
      pageTextStyle: { color: '#fff' },
      pageIconColor: '#cacaca',
      pageIconInactiveColor: '#999',
      selected,
      data: legendData,
    },
    xAxis: [
      {
        type: 'category',
        axisTick: { alignWithLabel: true },
        data: data.time,
        axisLabel: { color: '#fff' },
      },
    ],
    yAxis,
    series,
  };
}