ykzz-app/pages/aqjc/syOptions.js

export default function syOptions(data) { 
     // 水位
    const rzMin = Math.floor(Math.min(...data.map(item => item.value)));
    const rzMax = Math.ceil(Math.max(...data.map(item => item.value)));

    // 水压
    const pressMin = Math.floor(Math.min(...data.map(item => item.press)));
    const pressMax = Math.ceil(Math.max(...data.map(item => item.press)));

    // 高程
    const waterEleMin = Math.floor(Math.min(...data.map(item => item.waterEle)));
    const waterEleMax = Math.ceil(Math.max(...data.map(item => item.waterEle)));
    // 温度
    const tempMin = Math.floor(Math.min(...data.map(item => item.temp)));
    const tempMax = Math.ceil(Math.max(...data.map(item => item.temp)));

    // 模数
    const modulusMin = Math.floor(Math.min(...data.map(item => item.modulus)));
    const modulusMax = Math.ceil(Math.max(...data.map(item => item.modulus)));
    let chartData = {
          series: [
            {
                yAxisIndex: 0,
                name: '水位',
                type: 'line',
                color: "#d6eaec",
                data: data.map(o => o.value),
                symbol: 'none', // 设置标记点为'none'，即去掉圆点
                smooth: 0.5
            },
            {
                yAxisIndex: 1,
                name: '水压',
                type: 'line',
                color: "#60a0f8",
                lineStyle: {
                    // type: "dashed"
                },
                data: data.map(o => o.press),
                symbol: 'none', // 设置标记点为'none'，即去掉圆点
                smooth: 0.5
            },
            {
                yAxisIndex: 2,
                name: '水位高程',
                type: 'line',
                // color: "#60a0f8",
                lineStyle: {
                    // type: "dashed"
                },
                data: data.map(o => o.waterEle),
                symbol: 'none', // 设置标记点为'none'，即去掉圆点
                smooth: 0.5
            },
            {
                yAxisIndex: 3,
                name: '温度',
                type: 'line',
                // color: "#60a0f8",
                lineStyle: {
                    // type: "dashed"
                },
                data: data.map(o => o.temp),
                symbol: 'none', // 设置标记点为'none'，即去掉圆点
                smooth: 0.5
            },
            {
                yAxisIndex: 4,
                name: '模数',
                type: 'line',
                // color: "#60a0f8",
                lineStyle: {
                    // type: "dashed"
                },
                data: data.map(o => o.modulus),
                symbol: 'none', // 设置标记点为'none'，即去掉圆点
                smooth: 0.5
            },
        ]
    }
    let eopts = {
          tooltip: {
            trigger: 'axis',
        },
        legend: {
            top: '0%',
            left:-10,
            data: ['水位','水压','水位高程','温度', '模数']
        },
        grid: {
            left: 35,
            right: 120
        },
        xAxis: [
            {
                type: 'category',
                data: data.map(o => o.tm),
                inverse: false,
                splitLine: {
                    show: false
                },
                axisLabel: {
                    padding: [0, 0, 100, 0],
                    color: '#333',
                    fontSize: 12,
                    format:'ykzXAxisFormat'
                },
                axisLine: {
                    lineStyle: {
                        color: '#8c8c8c',
                        width: 1,
                    }
                },
                axisTick: {
                    show: false,
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                position: 'left',
                name: "水位(mm)",
                nameTextStyle: {
                    padding: [0, 0, 10, 10],
                    color: '#333333',
                    fontSize: 14
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#bfbfbf',
                        width: 0.5,
                        type: 'dotted'
                    }
                },
                axisLabel: {
                    color: '#333',
                    fontSize: 12,
                },
                axisLine: {
                    // show: false
                    lineStyle: {
                        color: '#8c8c8c',
                        width: 1,
                    }
                },
                axisTick: {
                    show: false,
                },
                min: rzMin,
                max: rzMax,
            },
            {
                type: 'value',
                position: 'right',
                name: "水压(KPa)",
                offset: -40,
                nameTextStyle: {
                    padding: [0, 0, 10, 10],
                    color: '#333333',
                    fontSize: 14
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#07a6ff',
                        width: 0.25,
                        type: 'dotted'
                    }
                },
                axisLabel: {
                    color: '#333',
                    fontSize: 12,
                },
                axisLine: {
                    // show: false
                    lineStyle: {
                        color: '#8c8c8c',
                        width: 1,
                    }
                },
                axisTick: {
                    show: false,
                },
                min: pressMin,
                max: pressMax,
            },
            {
                type: 'value',
                position: 'right',
                name: "水位高程(m)",
                offset: -115,
                nameTextStyle: {
                    padding: [0, 0, 10, 10],
                    color: '#333333',
                    fontSize: 14
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#07a6ff',
                        width: 0.25,
                        type: 'dotted'
                    }
                },
                axisLabel: {
                    color: '#333',
                    fontSize: 12,
                },
                axisLine: {
                    // show: false
                    lineStyle: {
                        color: '#8c8c8c',
                        width: 1,
                    }
                },
                axisTick: {
                    show: false,
                },
                min: waterEleMin,
                max: waterEleMax,
            },
            {
                type: 'value',
                position: 'right',
                name: "温度(℃)",
                offset: 25,
                nameTextStyle: {
                    padding: [0, 0, 10, 10],
                    color: '#333333',
                    fontSize: 14
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#07a6ff',
                        width: 0.25,
                        type: 'dotted'
                    }
                },
                axisLabel: {
                    color: '#333',
                    fontSize: 12,
                },
                axisLine: {
                    // show: false
                    lineStyle: {
                        color: '#8c8c8c',
                        width: 1,
                    }
                },
                axisTick: {
                    show: false,
                },
                min: tempMin,
                max: tempMax,
            },
            {
                type: 'value',
                position: 'right',
                name: "模数(F)",
                offset: 80,
                nameTextStyle: {
                    padding: [0, 0, 10, 10],
                    color: '#333333',
                    fontSize: 14
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#07a6ff',
                        width: 0.25,
                        type: 'dotted'
                    }
                },
                axisLabel: {
                    color: '#333',
                    fontSize: 12,
                },
                axisLine: {
                    // show: false
                    lineStyle: {
                        color: '#8c8c8c',
                        width: 1,
                    }
                },
                axisTick: {
                    show: false,
                },
                min: modulusMin,
                max: modulusMax,
            }
        ]
    }
    return {
        eopts,
        chartData
    }
}