tsg-web/src/views/Home/MapCtrl/components/Sqjcsj/drpOption.js

export default function drpOption({ data, wrz, grz }) {
  console.log("data",wrz, grz);
  const maxVal = Math.max(...data.map(obj => obj.drp))
  const maxSw = Math.ceil(Math.max(...data.map(obj => obj.z)))
  const minSw = Math.floor(Math.min(...data.map(obj => obj.z)))
  const maxLl = Math.max(...data.map(obj => obj.tq))
  const minLl = Math.min(...data.map(obj => obj.tq))
  return {
    tooltip: {
      trigger: 'axis',

    },
    grid: [
      {
        top: "15%",
        left: "10%",
        right: "8%",
        width: '80%',
        height: '35%'
      },
      {
        bottom: "5%",
        left: "10%",
        right: "8%",
        width: '80%',
        height: '35%'
      },
    ],
    legend: {
      // 显示图例
      show: true,
      // 图例的位置
      data: ['警戒水位', '保证水位', "降雨量", "水位", "转换流量"],
    },
    xAxis: [
      {
        gridIndex: 0,
        type: 'category',
        data: data.map(o => o.tm).reverse(),
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#333',
          fontSize: 12,
          show:false,
        },
        axisLine: {
          lineStyle: {
            color: '#07a6ff',
            width: 0.5,
          }
        },
        axisTick: {
          show: false,
        },
      },
      {
        gridIndex: 1,
        type: 'category',
        data: data.map(o => o.tm),
        inverse: true,
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#333',
          fontSize: 12,
          formatter: val => val.substr('2020-'.length, 11)
        },
        axisLine: {
          lineStyle: {
            color: '#07a6ff',
            width: 0.5,
          }
        },
        axisTick: {
          show: false,
        },
      }
    ],
    yAxis: [
      {
        inverse: true,
        gridIndex: 0,
        type: 'value',
        position: 'left',
        name: "降雨量(mm)",
        nameLocation: "start",
        axisLabel: {
          color: '#333',
          fontSize: 12,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#07a6ff',
            width: 0.25,
            type: 'dotted'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false,
        },
        min: 0,
        max: maxVal
      },
      {
        gridIndex: 1,
        type: 'value',
        position: 'left',
        name: "水位(m)",
        splitLine: {
          show: true,
          lineStyle: {
            color: '#07a6ff',
            width: 0.25,
            type: 'dotted'
          }
        },
        axisLabel: {
          color: '#333',
          fontSize: 12,
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false,
        },
        min: minSw,
        max: maxSw
      },
      {
        gridIndex: 1,
        type: 'value',
        position: 'right',
        name: "流量(m³/s)",
        splitLine: {
          show: false,
          lineStyle: {
            color: '#07a6ff',
            width: 0.25,
            type: 'dotted'
          }
        },
        axisLabel: {
          color: '#333',
          fontSize: 12,
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false,
        },
        min: minLl,
        max: maxLl
      }
    ],
    series: [
      {
        xAxisIndex: 1,
        yAxisIndex: 1,
        name: '保证水位',
        type: 'line',
        color: "#D9001B",
        lineStyle: {
          type: "dashed"
        },
        data:  data.map(o => grz),
        symbol: 'none' // 设置标记点为'none'，即去掉圆点
      },
      {
        xAxisIndex: 1,
        yAxisIndex: 1,
        name: '警戒水位',
        type: 'line',
        color: "#F59A23",
        barWidth: '60%',
        data:  data.map(o => wrz),
        lineStyle: {
          type: "dashed"
        },
        symbol: 'none' // 设置标记点为'none'，即去掉圆点
      },
    
      {
        name: '降雨量',
        type: 'bar',
        barWidth: '60%',
        data:  data.map(o => o.drp).reverse(),
        itemStyle: {
          color: "#007AFD",
        },
        label: {
          show: false,
        },

      },
      {
        xAxisIndex: 1,
        yAxisIndex: 1,
        name: '水位',
        type: 'line',
        symbol: 'none',
        color: "#0AE0B5",
        label: {
          show: false,
        },
        data:  data.map(o => o.z ? o.z.toFixed(2) : null),
      },
      {
        xAxisIndex: 1,
        yAxisIndex: 2,
        name: '转换流量',
        type: 'line',
        color: "#007AFD",
        symbol: 'none',
        showSymbol: false,
        label: {
          show: false,
        },
        data:  data.map(o => o.tq),
      }
    ]
  };
}