admin-sjzx/src/views/pqs/runManage/runEvaluate/components/region.vue

<template>
    <div class="mt10 mr5 btnsBox">
        <el-radio-group v-model="radio2">
            <el-radio-button label="区域" value="1" />
            <el-radio-button label="变电站" value="2" />
            <el-radio-button label="用户" value="3" />
        </el-radio-group>
    </div>
    <div :style="height">
        <MyEChart :options="options" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { mainHeight } from '@/utils/layout'
const radio2 = ref('1')
const height = mainHeight(300, 1.5)
const options = ref({})
const info = () => {
    let dataSource = [
        { value: '90', name: '张家口' },
        { value: '80', name: '廊坊' },
        { value: '70', name: '秦皇岛' },
        { value: '60', name: '唐山' },
        { value: '50', name: '承德' }
    ]
    options.value = {
        grid: {
            top: '10'
        },
        toolbox: {
            show: false
        },
        options: {
            yAxis: {
                type: 'category',
                data: dataSource.map(item => item.name),
                axisLabel: {
                    color: '#fff'
                },
                splitLine: {
                    show: false
                }
            },
            xAxis: {
                type: 'value',
                data: [1, 2, 3, 4],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#FFF'
                    },
                    formatter: function (value) {}
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true
                }
            },
            dataZoom: null,
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        color: function (params) {
                            return params.value >= 90
                                ? '#009900'
                                : params.value >= 80
                                ? '#77DA63'
                                : params.value >= 70
                                ? '#FFCC00'
                                : '#CC0000'
                        }
                    },
                    markLine: {
                        silent: false,
                        symbol: 'circle',
                        data: [
                            {
                                name: '',
                                yAxis: 100,
                                lineStyle: {
                                    color: '#009900'
                                },
                                label: {
                                    show: true,
                                    formatter: '优质',
                                    color: '#009900'
                                }
                            },
                            {
                                name: '',
                                yAxis: 90,
                                lineStyle: {
                                    color: '#77DA63'
                                },
                                label: {
                                    show: true,
                                    color: '#77DA63',
                                    formatter: '良好'
                                }
                            },
                            {
                                name: '',
                                yAxis: 60,
                                lineStyle: {
                                    color: '#FFCC00'
                                },
                                label: {
                                    show: true,
                                    color: '#FFCC00',
                                    formatter: '合格'
                                }
                            }
                        ]
                    },
                    data: dataSource.map(item => item.value)
                }
            ]
        }
    }
}
onMounted(() => {
    info()
})
</script>
<style lang="scss" scoped>
.btnsBox {
    display: flex;
    justify-content: end;
}
::v-deep .el-radio-button__inner {
    padding: 8px 18px;
    background: var(--el-color-primary);
    border: 1px solid #00fff4;
    border-radius: 0;
    font-weight: normal;
    color: #ffffff;
    text-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.73);
    opacity: 0.52;
}
::v-deep .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0;
}
::v-deep .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 0;
    border-left: 1px solid #00fff4;
}
::v-deep .is-active {
    border: 1px solid #00fff4;
    opacity: 1 !important;
    color: #ffffff;
    background: var(--el-color-primary);

    .el-radio-button__inner {
        opacity: 1 !important;
        border-left: 1px solid #00fff4 !important;
    }
}
</style>