上下对半图表

//设置图表
const highchartsTitle=ref('')
function init_highcharts(params:any) {
    HighchartsChartTem(HighCharts)
    const option = {

        chart: {
            type: 'column',
            backgroundColor: 'rgba(0,0,0,0)',

        },
        title: {

            text: highchartsTitle.value,
            style: {
                fontSize: '24px', // 设置字体大小
                fontWeight: 'bold', // 设置字体粗细

            }
        },

        subtitle: {
            text: ''
        },
        legend: {
            enabled: true, // 将图例禁用
            align: 'center', // 设置图例水平对齐方式
            verticalAlign: 'top', // 设置图例垂直对齐方式
            backgroundColor: 'rgba(255, 255, 255, 0)',
            itemStyle: {
                fontSize: '18px' // 设置图例文字大小
            }
        },
        xAxis: {
            categories: params.data,
            labels: {
                x: -10,
                style: {
                    fontSize: '18px', // 设置字体大小

                },
                formatter: function(this: Highcharts.AxisLabelsFormatterContextObject): string {
        const label = this.value.toString();
        return label.length > 3 ? `${label.slice(0, 3)}<br>${label.slice(3)}` : label;
    }
            }
        },
        yAxis: [{

            title: {
                text: '流量[m³/s]',
                style: {
                    fontSize: '18px' // 设置 y 轴单位文字大小
                }
            },

            labels: {
                style: {
                    fontSize: '20px', // 设置字体大小

                }
            },
            reversed: true,

            startOnTick: false, // 关闭从刻度线开始
            endOnTick: false, // 关闭从刻度线结束
            max:Math.max(...params.data2[0].data)*2.5,
            tickAmount: 7,
            gridLineWidth: 0, // 设置横线宽度

        },{

            title: {
                text: '水位[m]',
                style: {
                    fontSize: '18px' // 设置 y 轴单位文字大小
                }
            },
            labels: {
                style: {
                    fontSize: '20px', // 设置字体大小

                }
            },
            tickAmount: 7,
            opposite: true,
            min:Math.min(...params.data2[1].data),
            // max:Math.max(...params.data2[1].data)-Math.min(...params.data2[1].data)>3.5?Math.max(...params.data2[1].data)+5:Math.max(...params.data2[1].data)+0.5,
            max:Math.max(...params.data2[1].data) + (Math.max(...params.data2[1].data) - Math.min(...params.data2[1].data)),
            gridLineWidth: 1,



        }],
        plotOptions: {
        areaspline: {
            marker: {
                enabled: false // 禁用所有标记
            }
        }

        },
        series: params.data2

    };

    setTimeout(function () {
        HighCharts.chart('forecast', option as Object)
    }, 200)
}

GetFloodForecastData.value=res.Data
let coulm:any=[]
let lines:any=[]
let times:any=[]
GetFloodForecastData.value.forEach(function (item:any) {
    coulm.push(item.InFlow)
    lines.push(item.WaterLevel)
    times.push( timeToString(new Date(item.DataTime),"dd日HH时"))
})
const maxValue = Math.max(...coulm);
const maxIndex = coulm.indexOf(maxValue);

const maxData = Array(coulm.length).fill(null);
maxData[maxIndex] = maxValue;


const maxValue2 = Math.max(...lines);
const maxIndex2 = lines.indexOf(maxValue2);

const maxData2 = Array(lines.length).fill(null);
maxData2[maxIndex2] = maxValue2;
init_highcharts({
    data:times,
    data2:[
        {
            name: '降水量',

            data: coulm,
            borderWidth: 0,
            dataLabels: {
                enabled: true,

            },
            tooltip: {
                valueSuffix: 'mm' // 在数据值后添加单位
            },
            color: '#1BBAF0', // 设置折线图颜色

        },

        {
            name: '即时流量',
            type: 'areaspline', // 指定图表类型为折线图
            data: lines,
            color: '#41E4BB', // 设置折线图颜色
            yAxis: 1,
            tooltip: {
                valueSuffix: 'm³/s' // 在数据值后添加单位
            },
            dataLabels: {
                enabled: true,

            }
        },
        {
            name: '降水量最大值标记',
            type: 'scatter',
            data: maxData,
            marker: {
                symbol: 'circle',
                radius: 5,
                fillColor: 'red'
            },
            tooltip: {
                pointFormat: '降水量最大值'
            }
        },
        {
            yAxis: 1,
            name: '即时流量最大值标记',
            type: 'scatter',
            data: maxData2,
            marker: {
                symbol: 'triangle',
                radius: 5,
                fillColor: 'yellow'
            },
            tooltip: {
                pointFormat: '即时流量最大值'
            }
        },
    ]
})