2025.9.4

riku

2025-09-04 7f6661cca40e3530111d628222fa25462022ec78

 src/utils/chart/chart-option.js

@@ -14,6 +14,38 @@
  return fontSize;
}

function baseVisualMap(area) {
  const _pieces = [];
  area.forEach((v, i) => {
    // if (i == 0) {
    //   _pieces.push({
    //     lt: v[0],
    //     color: 'green'
    //   });
    // }
    _pieces.push({
      gte: v[0],
      lte: v[1],
      color: 'red'
    });
  });
  // const lastOne = area[area.length - 1];
  // _pieces.push({
  //   gt: lastOne[1],
  //   color: 'green'
  // });
  return {
    type: 'piecewise',
    // type: 'continuous',
    show: false,
    dimension: 0,
    pieces: _pieces,
    outOfRange: {
      color: ['#5470c6']
    }
  };
}

// 折线图
function factorLineOption(_xAxis, _series) {
  var fontSize = fGetChartFontSize();
@@ -121,9 +153,29 @@
}

// 折线图
function smallLineOption(_xAxis, _series, yMinInterval) {
function smallLineOption(
  _xAxis,
  _series,
  yMinInterval,
  mode = 'dark',
  tag,
  animation = true,
  defaultGrid,
  title
) {
  var fontSize = fGetChartFontSize();
  const _grid = defaultGrid
    ? defaultGrid
    : { left: '12%', right: '2%', top: '7%', bottom: '30%' };
  return {
    title: {
      text: title,
      textStyle: {
        color: mode == 'dark' ? '#ffffff' : '#000000'
      },
      left: 'center'
    },
    animation: animation,
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
@@ -133,42 +185,37 @@
        fontSize: fontSize
      }
    },
    grid: {
      left: '12%',
      right: '2%',
      top: '7%',
      bottom: '30%'
    },
    grid: _grid,
    legend: {
      show: false
    },
    xAxis: [
      {
        show: true,
        // name: '时间',
        name: tag ? '时间' : '',
        // type: 'time',
        data: _xAxis,
        axisLabel: {
          textStyle: {
            fontSize: fontSize
          },
          color: '#ffffff',
          textBorderColor: '#fff'
          color: mode == 'dark' ? '#ffffff' : '#000000',
          textBorderColor: mode == 'dark' ? '#fff' : '#000000'
        },
        axisTick: {
          lineStyle: {
            color: 'white'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          },
          intervel: 0,
          inside: false
        },

        nameTextStyle: {
          color: '#ffffff'
          color: mode == 'dark' ? '#ffffff' : '#000000'
        },
        axisLine: {
          lineStyle: {
            color: '#ffffff'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          }
        }
      },
@@ -176,7 +223,7 @@
    ],
    yAxis: [
      {
        // name: '浓度(μg/m³)',
        name: tag ? '浓度(μg/m³)' : '',
        // type: 'time',
        axisLabel: {
          textStyle: {
@@ -186,13 +233,13 @@
        axisLine: {
          show: true,
          lineStyle: {
            color: 'white'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: 'white'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          }
        },
        splitLine: {
@@ -211,7 +258,7 @@
        axisLine: {
          show: true,
          lineStyle: {
            color: 'white'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          }
        }
      }
@@ -301,4 +348,4 @@
  return option;
}

export { factorLineOption, smallLineOption, gaugeOption };
export { factorLineOption, smallLineOption, gaugeOption, baseVisualMap };