<template>

    <el-dialog v-model="dialogVisible" title="排名前10的监测点" width="1200">
        <div style="height: 55vh">
            <my-echart class="tall" :options="echartList" />
        </div>

    </el-dialog>

</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getXbLineRank } from '@/api/harmonic-boot/area'
import * as echarts from 'echarts/core'
const dialogVisible = ref(false)

const echartList = ref({})

const open = (row: any,) => {
    getXbLineRank({ ...row, reportFlag: 3, id: '' }).then((res: any) => {
        echartList.value = {
            // title: {
            //     text: ''
            // },
            tooltip: {
                formatter: function (params: any) {
                    // console.log(params);
                    var tips = ''
                    for (var i = 0; i < params.length; i++) {
                        tips += params[i].name + '</br/>'
                        tips += '超标天数' + ':' + '&nbsp' + '&nbsp' + (params[i].value == 0.14159 ? '暂无数据' : params[i].value +'天') + '</br/>'
                    }
                    return tips
                }
            },

            xAxis: {
                name: '监测点',
                data: res.data.map((item: any) => item.name),
                axisLabel: {
                    fontFamily: 'dinproRegular',
                    color: '#000',
                    fontSize: '12',
                    rotate: 30,
                }
            },
            yAxis: {
                name: '天',// 给X轴加单位
            
               


            },

            options: {
                dataZoom: null,
                series: [
                    {

                        type: 'bar',
                        data: res.data.map((item: any) => {
                            return item.overDays == 3.14159 ? 0.14159 : item.overDays
                        }),
                        barMaxWidth: 30,




                    }
                ]
            }
        }
    })



    dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>
