214 lines
5.1 KiB
Vue
214 lines
5.1 KiB
Vue
<template>
|
|
<div class="center-bottom-warp">
|
|
<item :title="'日充放电对比'">
|
|
<dv-loading v-if="Loading">Loading...</dv-loading>
|
|
<Chart v-else :options="options" />
|
|
</item>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import item from './item-warp.vue'
|
|
import { GetChargeDailyChart } from '@/api/screen/zzScreen'
|
|
import dayChargeIcon from '../../../assets/new-screen/dayCharge-icon.png'
|
|
import dayDischargeIcon from '../../../assets/new-screen/dayDischarge-icon.png'
|
|
export default {
|
|
components: { item },
|
|
data() {
|
|
return {
|
|
options: {},
|
|
Loading: true
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
async getData(deptId) {
|
|
try {
|
|
this.Loading = true
|
|
const { data } = await GetChargeDailyChart({
|
|
deptId: deptId
|
|
})
|
|
this.initChart(data)
|
|
} catch (error) {
|
|
console.log(error)
|
|
} finally {
|
|
this.Loading = false
|
|
}
|
|
|
|
// data.splice(0, 3)
|
|
},
|
|
initChart(data) {
|
|
if (data.length) {
|
|
const x_data = []
|
|
|
|
const dayCharge = []
|
|
const dayDischarge = []
|
|
data.forEach((el) => {
|
|
x_data.push(el.time)
|
|
dayCharge.push(el.dayCharge)
|
|
dayDischarge.push(el.dayDischarge)
|
|
})
|
|
this.options = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
orient: 'horizontal',
|
|
right: 30,
|
|
itemWidth: 14,
|
|
data: [
|
|
{ icon: 'image://' + dayChargeIcon, name: '充电' },
|
|
{ icon: 'image://' + dayDischargeIcon, name: '放电' }
|
|
]
|
|
|
|
},
|
|
|
|
grid: {
|
|
left: '5%',
|
|
top: '13%',
|
|
right: '5%',
|
|
bottom: '10%'
|
|
},
|
|
xAxis: [{
|
|
data: x_data,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#6E7174'
|
|
},
|
|
margin: 10 // 刻度标签与轴线之间的距离。
|
|
},
|
|
|
|
axisLine: {
|
|
show: false // 不显示x轴
|
|
},
|
|
axisTick: {
|
|
show: false // 不显示刻度
|
|
},
|
|
boundaryGap: true,
|
|
splitLine: {
|
|
show: false,
|
|
width: 0.08,
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#03202E'
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
name: 'kWh',
|
|
nameTextStyle: {
|
|
color: '#6E7174',
|
|
fontSize: 12,
|
|
padding: [0, 0, 0, -40]
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#eee',
|
|
type: 'solid'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#6E7174'
|
|
}
|
|
}
|
|
}],
|
|
series: [
|
|
|
|
// 柱体
|
|
{
|
|
name: '充电',
|
|
type: 'bar',
|
|
|
|
barGap: '20%',
|
|
barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/
|
|
itemStyle: {
|
|
'normal': {
|
|
'color': {
|
|
'x': 0,
|
|
'y': 0,
|
|
'x2': 0,
|
|
'y2': 1,
|
|
'type': 'linear',
|
|
'global': false,
|
|
'colorStops': [{ // 第一节下面
|
|
'offset': 0,
|
|
'color': 'rgba(0, 243, 253, 1)'
|
|
}, {
|
|
'offset': 1,
|
|
'color': 'rgba(0, 243, 253, 0.2)'
|
|
}]
|
|
}
|
|
}
|
|
},
|
|
|
|
data: dayCharge
|
|
},
|
|
{
|
|
name: '放电',
|
|
type: 'bar',
|
|
barGap: '20%',
|
|
barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/
|
|
itemStyle: {
|
|
'normal': {
|
|
'color': {
|
|
'x': 0,
|
|
'y': 0,
|
|
'x2': 0,
|
|
'y2': 1,
|
|
'type': 'linear',
|
|
'global': false,
|
|
'colorStops': [{ // 第一节下面
|
|
'offset': 0,
|
|
'color': 'rgba(253, 228, 0, 1)'
|
|
}, {
|
|
'offset': 1,
|
|
'color': 'rgba(253, 228, 0, 0.2)'
|
|
}]
|
|
}
|
|
}
|
|
},
|
|
|
|
data: dayDischarge
|
|
}
|
|
|
|
]
|
|
}
|
|
} else {
|
|
this.options = {
|
|
title: {
|
|
text: '暂无数据',
|
|
x: 'center',
|
|
y: 'center',
|
|
textStyle: {
|
|
fontSize: 14,
|
|
color: 'rgb(153, 153, 153)',
|
|
fontWeight: 'normal'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.center-bottom-warp {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|