125 lines
3.2 KiB
Vue
125 lines
3.2 KiB
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 = {
|
||
|
|
xAxis: {
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#FFF'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '10'
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
yAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: dataSource.map(item => item.name),
|
||
|
|
axisLabel: {
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataZoom: null,
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'bar',
|
||
|
|
itemStyle: {
|
||
|
|
color: function (params) {
|
||
|
|
return params.value >= 90
|
||
|
|
? '#009900'
|
||
|
|
: params.value >= 60
|
||
|
|
? '#FFCC00'
|
||
|
|
: params.value > 0
|
||
|
|
? '#CC0000'
|
||
|
|
: '#CCC'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
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>
|