tsg-app/pages/stlljk/chartOption.js

import "echarts/extension/bmap/bmap"


export default function drpOption (obj) {
  const data = obj.list;
  const monthsData = obj.chart
  console.log(data,monthsData);
  const maxQ = Math.ceil(Math.max(...data.map(obj => {
    return  obj?.q ? obj?.q:0
  })))
  const minQ = Math.floor(Math.min(...data.map(obj => {
    return  obj?.q? obj?.q :300
  })))
  const monthsX = Object.keys(monthsData);
  const res = monthsX.map(item => {
   const result =  data?.map(s => {
    const momth = s.tm.substr("2024-0".length, "2024-0".length - 5);
    if (momth == String(item)) {
      return [s.tm,monthsData[item]]
    } else {
      return []
    }
   })
    return result
  })
  const data1 = res.map(s => s.filter(o => o.length > 0)).filter(o => o.length > 0)
  const lines = data1.map((item, index, c) => ({
    type: 'line',
    markLine: {
      symbol:"none",
      lineStyle: {
        type: "dotted",
        color: "#47daff",
        width: 3
      },
      label: {
        show: true,
        position:"middle",
        color: "#47daff",
        distance: 5,
        format: "stMonth"
      },
      data: [
        [{ coord: [item[0][0], item[0][1]] },{coord:[item[item.length - 1][0],item[item.length - 1][1]]}]
      ]
    }
  }))
  
  let eopts = {
    tooltip: {
      trigger: 'axis'
    },
    grid: [
      {
        top: '10%',
        left: '11%',
        right: '5%',
        bottom:"12%"
        // width: '80%',
        // height: '35%'
      },
    ],
    legend: {
      // 显示图例
      show: true,
      top: '-1%',
    },
   
    xAxis: [
      {
        type: 'category',
        data: data.map(o => o.tm),
        inverse: true,
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#333',
          fontSize: 12,
          format:"stList" 
        },
        axisLine: {
          lineStyle: {
            color: '#000',
            width: 0.5
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        // gridIndex:0,
        position: 'left',
        name: '生态流量(m³/s)',
        splitLine: {
          show: true,
          lineStyle: {
            color: '#000',
            width: 0.25,
            type: 'dotted'
          }
        },
        axisLabel: {
          color: '#333',
          fontSize: 12
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        min: minQ,
        max: maxQ 
      },
    ],
  }
  let chartData = {
    series: [
      {
        name: '生态流量(m³/s)',
        type: 'line',
        symbol: 'none',
        color: '#4fa2ea',
        smooth:true,
        label: {
          show: false
        },
        data: data.map(o => o.q)
      },
      ...lines
    ]
  }
  return {
    eopts,
    chartData
  }
}