<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 { getLineRank } from '@/api/harmonic-boot/area'
import * as echarts from 'echarts/core'
const dialogVisible = ref(false)

const echartList = ref({})

const open = (row: any,) => {
    getLineRank({ ...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轴加单位
                min: 0,
                max: 2,
                interval: 0.2,
                splitLine: {
                    show: false
                },

                axisLabel: {
                    show: true,

                    // 这里重新定义就可以
                    formatter: function (value, index) {
                        var texts = []
                        if (value === 1) {
                            texts.push('1级')
                        } else if (value === 1.2) {
                            texts.push('2级')
                        } else if (value === 1.4) {
                            texts.push('3级')
                        } else if (value === 1.6) {
                            texts.push('4级')
                        } else if (value === 2) {
                            texts.push('5级')
                        }
                        return texts
                    }

                },
            },

            options: {
                dataZoom: null,
                series: [
                    {

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

                        itemStyle: {
                            normal: {
                                // 随机显示
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                // 定制显示（按顺序）
                                color: function (params) {
                                    if (params.value == 0 || params.value == 0.14159) {
                                        return '#ccc'
                                    } else if (params.value > 2) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#A52a2a'
                                                }
                                            ],
                                            false
                                        )
                                    } else if (1.6 < params.value && params.value <= 2) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#FF9900'
                                                }
                                            ],
                                            false
                                        )
                                    } else if (1.2 < params.value && params.value <= 1.6) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#FFCC33'
                                                }
                                            ],
                                            false
                                        )
                                    } else if (1 < params.value && params.value <= 1.2) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#3399FF'
                                                }
                                            ],
                                            false
                                        )
                                    } else if (
                                        0 < params.value &&
                                        params.value <= 1 &&
                                        params.value >= 0 &&
                                        params.value !== 0.05
                                    ) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#339966'
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value == 0.05) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#999999'
                                                }
                                            ],
                                            false
                                        )
                                    }
                                }
                            }
                        },
                        markLine: {
                            silent: false,
                            symbol: 'circle',
                            lineStyle: {
                                color: 'red',
                                width: 1
                            },
                            emphasis: {
                                lineStyle: {
                                    width: 1
                                }
                            },
                            data: [
                                {
                                    name: '',
                                    yAxis: 1,
                                    lineStyle: {
                                        color: '#339966'
                                    },
                                    label: {
                                        //position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: '#339966'
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 1.2,
                                    lineStyle: {
                                        color: '#3399FF'
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: '#3399FF'
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 1.4,
                                    lineStyle: {
                                        color: '#FFCC33'
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: '#FFCC33'
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 1.6,
                                    lineStyle: {
                                        color: '#FF9900'
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: '#FF9900'
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 2,
                                    lineStyle: {
                                        color: '#A52a2a'
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: '#A52a2a'
                                        }
                                    }
                                }
                            ]
                        },

                    }
                ]
            }
        }
    })



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