<template>
    <div class="page-body">
        <div class="section-container">
            <div id="chart" class="full"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    mounted() {
        this.$nextTick(() => {
            this.initOption()
        })
        this.$root.$on('resize', () => {
            this.resize(500)
        })
    },
    methods: {
        initOption() {
            const dom = document.getElementById('chart')
            this.chart = echarts.init(dom)
            let normalColor = '#CBDDFF'
            var maxHeight = '65' //最大高度/堤坝高度
            let markline = ['62', '57', '50', '0'] //设计水位，汛限水位，当前水位，校核水位
            //位移
            let option = {
                title: {
                    text: '浸润线示意图',
                    left: 'center',
                    top: 'top',
                    textStyle: {
                        color: '#ddd',
                        fontSize: '14',
                        fontWeight: 700,
                    },
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['库水位(m)', '死水位(m)', '校核洪水位(m)', '浸润线'],
                    top: '20px',
                    textStyle: {
                        color: '#14b5ff',
                    },
                },
                grid: {
                    top: '10%',
                    left: '2%',
                    right: '12%',
                    bottom: '10%',
                    containLabel: true,
                },
                xAxis: {
                    z: 30,
                    type: 'value',
                    max: 300,
                    min: 0,
                    interval: 10,
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {show: true},
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: '#138ec9',
                            width: 1,
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    name: '库水位（m）',
                    nameTextStyle: {
                        fontSize: 16,
                        color: normalColor,
                    },
                    max: maxHeight,
                    min: 0,
                    position: 'left',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#138ec9',
                            width: 1,
                        },
                    },
                    axisTick: {show: true},
                    axisLabel: {
                        fontSize: 14,
                        color: '#138ec9',
                    },
                    splitLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        z: 2,
                        type: 'line',
                        gridIndex: 0,
                        data: [
                            [0, 0],
                            [140, 46],
                            [150, 46],
                            [290, 0],
                        ],
                        tooltip: {
                            show: false,
                        },
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            normal: {
                                color: '#58f2f2',
                                lineStyle: {
                                    color: '#58f2f2',
                                },
                            },
                        },
                    },
                    {
                        z: 1,
                        type: 'line',
                        data: [
                            [135, 0],
                            [140, 46],
                            [150, 46],
                        ],
                        tooltip: {
                            show: false,
                        },
                        symbol: 'none',
                        areaStyle: {},
                        itemStyle: {
                            normal: {
                                color: '#e6e6e6',
                                lineStyle: {
                                    color: '#e6e6e6',
                                },
                            },
                        },
                    },
                    {
                        name: '库水位(m)',
                        type: 'line',
                        gridIndex: 0,
                        data: [
                            [0, 42],
                            [139, 42],
                        ],
                        markPoint: {
                            data: [
                                {
                                    name: '库水位',
                                    value: '库水位' + 42,
                                    xAxis: 100,
                                    yAxis: 42,
                                },
                            ],
                            label: {
                                offset: [0, -30],
                                color: '#3a5eff',
                            },
                        },
                        symbol: 'none',
                        symbolSize: 5,
                        sampling: 'average',
                        itemStyle: {
                            normal: {
                                color: '#3a5eff',
                                lineStyle: {
                                    color: '#3a5eff',
                                },
                                label: {
                                    show: !0,
                                    position: [20, -15],
                                    formatter: function (e) {
                                        return (
                                            console.log('66666666666666', e),
                                            '' != e.value ? e.data[1] : ''
                                        )
                                    },
                                    textStyle: {
                                        color: '#ffff00',
                                    },
                                },
                            },
                        },
                    },
                    {   
                        z:3,
                        name: '浸润线',
                        type: 'line',
                        gridIndex: 0,
                        data: [
                            [139, 42],
                            [155, 30],
                            [180, 26],
                            [200, 20]
                        ],
                        symbol: 'none',
                        symbolSize: 5,
                        sampling: 'average',
                        itemStyle: {
                            normal: {
                                color: '#ffd023',
                                lineStyle: {
                                    color: '#ffd023',
                                },
                            },
                        },
                    },
                    {
                        name: '死水位(m)',
                        type: 'line',
                        gridIndex: 0,
                        data: [
                            [0, 28],
                            [84, 28],
                        ],
                        markPoint: {
                            data: [
                                {
                                    name: '死水位',
                                    value: '死水位28',
                                    xAxis: 37,
                                    yAxis: 28,
                                },
                            ],
                            label: {
                                offset: [0, -30],
                                color: '#0000FF',
                            },
                        },
                        symbol: 'none',
                        symbolSize: 5,
                        sampling: 'average',
                        itemStyle: {
                            normal: {
                                color: '#0000FF',
                                lineStyle: {
                                    color: '#0000FF',
                                },
                            },
                        },
                    },
                    {
                        name: '校核洪水位(m)',
                        type: 'line',
                        gridIndex: 0,
                        data: [
                            [0, 44],
                            [134, 44],
                        ],
                        markPoint: {
                            data: [
                                {
                                    name: '校核洪水位',
                                    value: '校核洪水位44',
                                    xAxis: 80,
                                    yAxis: 44,
                                },
                            ],
                            label: {
                                offset: [0, -30],
                                color: '#00ff7f',
                            },
                        },
                        symbol: 'none',
                        symbolSize: 5,
                        sampling: 'average',
                        itemStyle: {
                            normal: {
                                color: '#00ff7f',
                                lineStyle: {
                                    color: '#00ff7f',
                                },
                            },
                        },
                    },
                    {
                        z: 15,
                        barGap: '-100%',
                        name: '管底高程(m)',
                        type: 'bar',
                        barWidth: 15,
                        emphasis: {
                            focus: 'series',
                        },
                        grid: {
                            show: 'false',
                            borderWidth: '0',
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(14, 24, 39, 1)',
                                barBorderColor: 'rgba(14, 24, 39, 1)',
                            },
                        },
                        data: [[155, 13]],
                    },
                    {
                        z: 10,
                        name: '浸润水位(m)',
                        type: 'bar',
                        barWidth: 15,
                        emphasis: {
                            focus: 'series',
                        },
                        itemStyle: {
                            normal: {
                                color: '#14b5ff',
                                barBorderColor: 'none',
                                grid: {
                                    show: false,
                                    borderWidth: '0',
                                },
                                label: {
                                    show: true,
                                    position: [20, -15],
                                    formatter: function (e) {
                                        return '' != e.value ? e.data[1] : ''
                                    },
                                    textStyle: {
                                        color: '#ffff00',
                                    },
                                },
                            },
                        },
                        data: [[155, 30]],
                    },

                    {
                        z: 5,
                        name: '管口高程(m)',
                        type: 'bar',
                        barWidth: 15,
                        emphasis: {
                            focus: 'series',
                        },
                        itemStyle: {
                            normal: {
                                color: '#bababa',
                                barBorderColor: 'none',
                                grid: {
                                    show: false,
                                    borderWidth: '0',
                                },
                            },
                        },
                        data: [[155, 45]],
                    },
                    {
                        z: 15,
                        barGap: '-100%',
                        name: '管底高程(m)',
                        type: 'bar',
                        barWidth: 15,
                        emphasis: {
                            focus: 'series',
                        },
                        grid: {
                            show: 'false',
                            borderWidth: '0',
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(14, 24, 39, 1)',
                                barBorderColor: 'rgba(14, 24, 39, 1)',
                            },
                        },
                        data: [[180, 15]],
                    },
                    {
                        z: 10,
                        name: '浸润水位(m)',
                        type: 'bar',
                        barWidth: 15,
                        emphasis: {
                            focus: 'series',
                        },
                        itemStyle: {
                            normal: {
                                color: '#14b5ff',
                                barBorderColor: 'none',
                                grid: {
                                    show: 'false',
                                    borderWidth: '0',
                                },
                                label: {
                                    show: true,
                                    position: [20, -15],
                                    formatter: function (e) {
                                        return '' != e.value ? e.data[1] : ''
                                    },
                                    textStyle: {
                                        color: '#ffff00',
                                    },
                                },
                            },
                        },
                        data: [[180, 26]],
                    },
                    {
                        z: 5,
                        name: '管口高程(m)',
                        type: 'bar',
                        barWidth: 15,
                        emphasis: {
                            focus: 'series',
                        },
                        itemStyle: {
                            normal: {
                                color: '#bababa',
                                barBorderColor: 'none',
                                grid: {
                                    show: 'false',
                                    borderWidth: '0',
                                },
                            },
                        },
                        data: [[180, 38]],
                    },
                    {
                        z: 15,
                        barGap: '-100%',
                        name: '管底高程(m)',
                        type: 'bar',
                        barWidth: 15,
                        emphasis: {
                            focus: 'series',
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(14, 24, 39, 1)',
                                barBorderColor: 'rgba(14, 24, 39, 1)',
                            },
                        },
                        data: [[200, 16]],
                    },
                    {
                        z: 10,
                        name: '浸润水位(m)',
                        type: 'bar',
                        barWidth: 15,
                        emphasis: {
                            focus: 'series',
                        },
                        itemStyle: {
                            normal: {
                                color: '#14b5ff',
                                barBorderColor: 'none',
                                label: {
                                    show: true,
                                    position: [20, -15],
                                    formatter: function (e) {
                                        return '' != e.value ? e.data[1] : ''
                                    },
                                    textStyle: {
                                        color: '#ffff00',
                                    },
                                },
                            },
                        },
                        data: [[200, 20]],
                    },
                    {
                        z: 5,
                        name: '管口高程(m)',
                        type: 'bar',
                        barWidth: 15,
                        emphasis: {
                            focus: 'series',
                        },
                        itemStyle: {
                            normal: {
                                color: '#bababa',
                                barBorderColor: 'none',
                            },
                        },
                        data: [[200, 31]],
                    },
                ],
            }
            option && this.chart.setOption(option)
        },
    },
}
</script>

<style lang="scss" scoped>

.page-body{
    width: 100%;
    height: 100%;
    background-color: #0e1827;
}
.section-container {
    width: 1600px;
    height: 800px;
    margin: 0 auto;
    .full{
        width: 100%;
        height: 100%;
    }
}

</style>
