admin-govern/src/views/pms/Event-boot/Region/components/echart.vue

<template>
    <div>
        <my-echart class="bars_w" :options="areaStatistics" />
        <div class="separate">
            <my-echart class="bars_w" :options="voltageStatistics" />
            <my-echart class="bars_w" :options="monthlyStatistics" />
        </div>
    </div>
</template>

<script setup lang="ts">
import MyEchart from '@/components/echarts/MyEchart.vue'
import { reactive, ref, defineExpose } from 'vue'
import { mainHeight } from '@/utils/layout'
let areaStatistics = ref({})
let voltageStatistics = ref({})
let monthlyStatistics = ref({})

const Processing = (list: any) => {
    // 区域
    let echartsndArr: string[] = []
    let echartsArr: string[] = []
    list.areaCalculation.forEach((item: any) => {
        echartsndArr.push(item.areaName)
        if (item.frequency == 0) {
            item.frequency = 1.1
        } else if (item.frequency == 1) {
            item.frequency = 1.3
        }
        echartsArr.push(item.frequency)
    })
    areaStatistics.value = {
        title: {
            text: '区域'
        },
        tooltip: {
            formatter: function (params: any) {
                let html = '区域：' + params[0].name
                params.forEach((item: any) => {
                    if (item.value == 1.1) {
                        html += `<br/>${item.seriesName}: ${0}次`
                    } else if (item.value == 1.3) {
                        html += `<br/>${item.seriesName}: ${1}次`
                    } else {
                        html += `<br/>${item.seriesName}: ${item.value}次`
                    }
                })
                return html
            }
        },

        legend: {
            data: ['暂降次数']
        },
        xAxis: {
            name: '区域', // 给X轴加单位
            data: echartsndArr
        },
        yAxis: {
            name: '次数' // 给X轴加单位
        },
        options: {
            series: [
                {
                    barMinHeight: 5,
                    barMaxWidth: 30,
                    itemStyle: {
                        normal: {
                            //这里是颜色
                            color: function (params: any) {
                                if (params.data == 1.1) {
                                    return '#B3B3B3'
                                } else {
                                    return '#07CCCA '
                                }
                            }
                        }
                    },
                    name: '暂降次数',
                    type: 'bar',
                    data: echartsArr
                }
            ]
        }
    }
}
// 电压等级
const Grade = (list: any) => {
    let echartsndArr: string[] = []
    let echartsArr: string[] = []
    list.voltageLevelCalculation.forEach((item: any) => {
        echartsndArr.push(item.voltageLevel)
        if (item.frequency == 0) {
            item.frequency = 1.1
        } else if (item.frequency == 1) {
            item.frequency = 1.3
        }
        echartsArr.push(item.frequency)
    })

    voltageStatistics.value = {
        title: {
            text: '电压等级'
        },
        tooltip: {
            formatter: function (params: any) {
                let html = '电压等级：' + params[0].name
                params.forEach((item: any) => {
                    if (item.value == 1.1) {
                        html += `<br/>${item.seriesName}: ${0}次`
                    } else if (item.value == 1.3) {
                        html += `<br/>${item.seriesName}: ${1}次`
                    } else {
                        html += `<br/>${item.seriesName}: ${item.value}次`
                    }
                })
                return html
            }
        },

        legend: {
            data: ['暂降次数']
        },
        xAxis: {
            name: '电压等级',
            data: echartsndArr
        },
        yAxis: {
            name: '次数' // 给X轴加单位
        },
        options: {
            series: [
                {
                    barMaxWidth: 30,
                    barMinHeight: 5,
                    itemStyle: {
                        normal: {
                            //这里是颜色
                            color: function (params: any) {
                                if (params.data == 1.1) {
                                    return '#B3B3B3'
                                } else {
                                    return '#07CCCA '
                                }
                            }
                        }
                        // color: echartsColor.FigureColor[0],
                    },
                    name: '暂降次数',
                    type: 'bar',
                    data: echartsArr
                }
            ]
        }
    }
}
//时间
const Relation = (list: any, interval: number) => {
    let echartsndArr: string[] = []
    let echartsArr: string[] = []
    let echartswArr: string[] = []
    list.monthCalculation.forEach((item: any, i: number) => {
        if (i != 0) {
            item.month = item.month.slice(5)
        } else if (i == 0) {
            let date = item.month.slice(5)
            // let t = item.month.slice(0, 4);
            // item.month = date + "\n" + "(" + t + ")";
            item.month = date
        }

        echartsndArr.push(item.month)
        // if (item.linked == 0 || item.notAssociated == 0) {
        //   item.linked = 3.14159;
        //   item.notAssociated = 3.14159;
        // }
        if (item.linked == 0) {
            item.linked = 1.1
        } else if (item.linked == 1) {
            item.linked = 1.3
        }
        echartsArr.push(item.linked)
        if (item.notAssociated == 0) {
            item.notAssociated = 1.1
        } else if (item.notAssociated == 1) {
            item.notAssociated = 1.3
        }
        echartswArr.push(item.notAssociated)
    })
    monthlyStatistics.value = {
        title: {
            text: '时间'
        },
        tooltip: {
            formatter: function (params: any) {
                let html = '时间：' + params[0].name
                params.forEach((item: any) => {
                    if (item.value == 1.1) {
                        html += `<br/>${item.seriesName}: ${0}次`
                    } else if (item.value == 1.3) {
                        html += `<br/>${item.seriesName}: ${1}次`
                    } else {
                        html += `<br/>${item.seriesName}: ${item.value}次`
                    }
                })
                return html
            }
        },

        legend: {
            data: ['未关联暂降次数', '已关联处理事件']
        },
        color: ['#07CCCA', '#Ff6600'],
        xAxis: {
            name: '月份', // 给X轴加单位
            data: echartsndArr
        },
        yAxis: {
            name: '次数' // 给X轴加单位
        },
        options: {
            series: [
                {
                    name: '未关联暂降次数',
                    type: 'bar',
                    barMaxWidth: 30,
                    barMinHeight: 5,
                    data: echartswArr,
                    itemStyle: {
                        normal: {
                            label: {
                                // show: true, //数字开启显示
                                textStyle: {
                                    //数值样式
                                    color: '#fff',
                                    fontSize: 14,
                                    fontWeight: 600
                                }
                            },
                            color: function (params: any) {
                                if (params.data == 1.1) {
                                    return '#B3B3B3'
                                } else {
                                    return '#07CCCA '
                                }
                            }
                        }
                    }
                },
                {
                    name: '已关联处理事件',
                    type: 'bar',
                    barMaxWidth: 30,
                    data: echartsArr,
                    itemStyle: {
                        normal: {
                            label: {
                                // show: true, //数字开启显示
                                textStyle: {
                                    //数值样式
                                    color: '#fff',
                                    fontSize: 14,
                                    fontWeight: 600
                                }
                            },
                            color: function (params: any) {
                                if (params.data == 1.1) {
                                    return '#B3B3B3'
                                } else {
                                    return '#Ff6600'
                                }
                            }
                        }
                    }
                }
            ]
        }
    }
}
// Processing()
defineExpose({ Processing, Grade, Relation })
const layout = mainHeight(150) as any
</script>

<style lang="scss" scoped>
.bars_w {
    width: 100%;
    height: calc(v-bind('layout.height') / 2);
}
.separate {
    display: flex;
}
</style>