调试自动生成网格融合图片功能（待完成）

riku

2025-09-03 b2392458ebf42594b9fc5390fda40d7a0a12f923

 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();
@@ -22,16 +54,27 @@
    animationDelayUpdate: function (idx) {
      return idx * 5;
    },
    // toolbox: {
    //   bottom: 0,
    //   feature: {
    //     dataZoom: {},
    //     magicType: {
    //       type: ['line', 'bar']
    //     },
    //     restore: {}
    //   }
    // },
    toolbox: {
      // bottom: 0,
      feature: {
        // dataZoom: {},
        // magicType: {
        //   type: ['line', 'bar']
        // },
        // restore: {
        //   title: '刷新'
        // },
        saveAsImage: {
          show: true,
          backgroundColor: '#122b54a9',
          name: '走航监测图',
          title: '保存为图片',
          iconStyle: {
            borderColor: '#fff'
          }
        }
      }
    },
    tooltip: {
      textStyle: {
        fontSize: fontSize
@@ -110,9 +153,29 @@
}

// 折线图
function smallLineOption(_xAxis, _series) {
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;
@@ -122,42 +185,37 @@
        fontSize: fontSize
      }
    },
    grid: {
      left: '11%',
      right: '2%',
      top: '7%',
      bottom: '20%'
    },
    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'
          }
        }
      },
@@ -165,7 +223,7 @@
    ],
    yAxis: [
      {
        // name: '浓度(μg/m³)',
        name: tag ? '浓度(μg/m³)' : '',
        // type: 'time',
        axisLabel: {
          textStyle: {
@@ -175,19 +233,19 @@
        axisLine: {
          show: true,
          lineStyle: {
            color: 'white'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: 'white'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          }
        },
        splitLine: {
          show: false
        },
        minInterval: 1,
        minInterval: yMinInterval ? yMinInterval : 1,
        intervel: 1,
        min: function (value) {
          return Math.floor(value.min);
@@ -200,7 +258,7 @@
        axisLine: {
          show: true,
          lineStyle: {
            color: 'white'
            color: mode == 'dark' ? '#ffffff' : '#000000'
          }
        }
      }
@@ -290,4 +348,4 @@
  return option;
}

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