tsg-web/src/views/sq/qth/skyh/drpOption.js

export default function drpOption(data,records) {
  console.log("data",data);
  // const maxVal = 0//Math.max(...data.map(obj => obj.drp))
  // const max1 = Math.max(...[...data.map(obj => obj.value),...yjData?.map(obj => obj.value)])
  // const min1 = Math.min(...[...data.map(obj => obj.value),...yjData?.map(obj => obj.value)])
  // const max2 = Math.max(...data.map(obj => obj.rz))
  // const min2 = Math.min(...data.map(obj => obj.rz))
  // const yj = yjData?.map((item,index)=>{
  //   return {
  //     yAxisIndex: 0,
  //     name: item.yjName,
  //     type: 'line',
  //     color: item.color,
  //     lineStyle: {
  //       type: "dashed",
  //       width: 1,
  //     },
  //     data: data.map(o => item.value),
  //     symbol: 'none', // 设置标记点为'none'，即去掉圆点
  //     smooth: 0.5 
  //   }
  // })

  return {

    tooltip: {
      trigger: 'axis',
    },
    grid: [
      {
        top: "7%",
        left: "15%",
        right: "8%",
        width: '83%',
        height: '40%'
      },
      {
        bottom: '5%',
        left: '10%',
        right: '8%',
        width: '82%',
        height: '38%'
      }
    ],
    legend: {
      top:'1%',
      // 显示图例
      show: true,
      // 图例的位置
      data: ["溢洪流量","校核水位","设计水位","汛限水位","水位", "库容"],
    },
    xAxis: [
      {
        gridIndex: 0,
        type: 'category',
        data: data.map(o => o.tm),
        inverse: false,
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#8c8c8c',
          fontSize: 12,
          show: false
          // formatter: val => val.slice(11,16)
        },
        axisLine: {
          lineStyle: {
            color: '#8c8c8c',
            width: 0.5,
          }
        },
        axisTick: {
          show: false,
        },
      },
      {
        gridIndex: 1,
        type: 'category',
        data: data.map(o => o.tm),
        inverse: false,
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#8c8c8c',
          fontSize: 12,
          formatter: val => val.slice(11,16)
        },
        axisLine: {
          lineStyle: {
            color: '#8c8c8c',
            width: 0.5,
          }
        },
        axisTick: {
          show: false,
        },
      }
    ],
    yAxis: [
      {
        gridIndex: 0,
        type: 'value',
        position: 'left',
        // name: "库容(RH)",
        nameTextStyle: {
          padding: [0, 0, 10, -20],
          color:'#8c8c8c',
          fontSize: 14
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#bfbfbf',
            width: 0.5,
            type: 'dotted'
          }
        },
        axisLabel: {
          color: '#8c8c8c',
          fontSize: 12,
          formatter: val => val+'m³/s'
        },
        axisLine: {
          show: false
          // lineStyle: {
          //   color: '#8c8c8c',
          //   width: 1,
          // }
        },
        axisTick: {
          show: false,
        },
      },
      {
        gridIndex: 1,
        type: 'value',
        position: 'left',
        name: '水位(m)',
        nameTextStyle: {
          padding: [0, 0, 10, -20],
          color:'#8c8c8c',
          fontSize: 14
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#bfbfbf',
            width: 0.5,
            type: 'dotted'
          }
        },
        axisLabel: {
          color: '#8c8c8c',
          fontSize: 12,
          // formatter: val => val+'%'
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      },
      {
        gridIndex: 1,
        type: 'value',
        position: 'right',
        name: '库容(万m³)',
        nameTextStyle: {
          padding: [0, 0, 10, -20],
          color:'#8c8c8c',
          fontSize: 14
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#bfbfbf',
            width: 0.5,
            type: 'dotted'
          }
        },
        axisLabel: {
          color: '#8c8c8c',
          fontSize: 12,
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      }
    ],
    series: [
      {
        xAxisIndex: 0,
        name: '溢洪流量',
        type: 'line',
        color: "#3478f4",
        itemStyle: {
          color: '#678ef2',
          borderWidth: '0.3'
        },
        symbolSize:8,
        areaStyle: {
          // 开启阴影
          shadowColor: 'rgba(0, 0, 0, 0.1)',  // 阴影颜色
          shadowBlur: 10,                    // 阴影的模糊大小
          shadowOffsetX: 5,                  // 阴影水平方向上的偏移
          shadowOffsetY: 5,                  // 阴影垂直方向上的偏移
          opacity: 0.3                         // 区域颜色的透明度
        },
        data:  data.map(o => o.flowNum),
        // symbol: 'none', // 设置标记点为'none'，即去掉圆点
      },
      {
        xAxisIndex: 1,
        yAxisIndex: 1,
        name: '校核水位',
        type: 'line',
        color: "#da2f2d",
        symbol: 'none', // 设置标记点为'none'，即去掉圆点
        data:  data.map(o => records.calFloodLev),
        // symbol: 'none', // 设置标记点为'none'，即去掉圆点
      },
      {
        xAxisIndex: 1,
        yAxisIndex: 1,
        name: '设计水位',
        type: 'line',
        color: "#e89e42",
        symbol: 'none', // 设置标记点为'none'，即去掉圆点
        data:  data.map(o => records.desFloodLev),
        // symbol: 'none', // 设置标记点为'none'，即去掉圆点
      },
      {
        xAxisIndex: 1,
        yAxisIndex: 1,
        name: '汛限水位',
        type: 'line',
        color: "#f8dda7",
        symbol: 'none', // 设置标记点为'none'，即去掉圆点
        data:  data.map(o => records.flLowLimLev),
        // symbol: 'none', // 设置标记点为'none'，即去掉圆点
      },
      {
        xAxisIndex: 1,
        yAxisIndex: 1,
        xAxisIndex: 1,
        yAxisIndex: 1,
        name: '水位',
        type: 'line',
        color: "#67ddb7",
        symbol: 'none', // 设置标记点为'none'，即去掉圆点
        data:  data.map(o => o.waterLevel),
        // symbol: 'none', // 设置标记点为'none'，即去掉圆点
      },
      {
        xAxisIndex: 1,
        yAxisIndex: 2,
        name: '库容',
        type: 'line',
        color: "#3478f4",
        data:  data.map(o => o.boxNum),
        symbol: 'none', // 设置标记点为'none'，即去掉圆点
      },
    ]
  };
}