Compare commits
2 Commits
945e332181
...
db51049507
| Author | SHA1 | Date | |
|---|---|---|---|
| db51049507 | |||
| abcc75f669 |
@ -29,23 +29,31 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'Mix-Chart'
|
default: 'Mix-Chart'
|
||||||
},
|
},
|
||||||
nameData: {
|
|
||||||
type: Array,
|
|
||||||
default: []
|
|
||||||
},
|
|
||||||
dataList: {
|
dataList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: []
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lastDataList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chartType: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
chart: null
|
chart: null,
|
||||||
|
series: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
|
||||||
this.initChart()
|
|
||||||
},
|
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
if (!this.chart) {
|
if (!this.chart) {
|
||||||
return
|
return
|
||||||
@ -53,20 +61,232 @@ export default {
|
|||||||
this.chart.dispose()
|
this.chart.dispose()
|
||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
dataList: {
|
||||||
|
handler (val) {
|
||||||
|
if (val) {
|
||||||
|
this.series = []
|
||||||
|
if (this.chartType.indexOf('柱状') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '本' + this.title,
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '上' + this.title,
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.chartType.indexOf('折线') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '本' + this.title,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '上' + this.title,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
chartType: {
|
||||||
|
handler (val) {
|
||||||
|
console.log(val)
|
||||||
|
if (val.length) {
|
||||||
|
this.series = []
|
||||||
|
if (val.indexOf('柱状') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '本' + this.title,
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '上' + this.title,
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (val.indexOf('折线') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '本' + this.title,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '上' + this.title,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart () {
|
initChart () {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose()
|
||||||
|
}
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
this.chart = echarts.init(document.getElementById(this.id))
|
||||||
const xData = (function () {
|
const xData = this.dataList.map(item => {
|
||||||
const data = []
|
return item.time
|
||||||
for (let i = 1; i < 13; i++) {
|
})
|
||||||
data.push(i + 'month')
|
|
||||||
}
|
|
||||||
return data
|
|
||||||
})()
|
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
backgroundColor: '#344b58',
|
backgroundColor: '#344b58',
|
||||||
title: {
|
title: {
|
||||||
text: this.title,
|
text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.title + '用电量',
|
||||||
x: '20',
|
x: '20',
|
||||||
top: '20',
|
top: '20',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@ -102,7 +322,9 @@ export default {
|
|||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#90979c'
|
color: '#90979c'
|
||||||
},
|
},
|
||||||
data: this.nameData
|
data: this.series.map(item => {
|
||||||
|
return item.name
|
||||||
|
})
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
xAxis: [
|
xAxis: [
|
||||||
@ -156,8 +378,8 @@ export default {
|
|||||||
height: 30,
|
height: 30,
|
||||||
xAxisIndex: [0],
|
xAxisIndex: [0],
|
||||||
bottom: 30,
|
bottom: 30,
|
||||||
start: 10,
|
start: 0,
|
||||||
end: 80,
|
end: 100,
|
||||||
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||||||
handleSize: '110%',
|
handleSize: '110%',
|
||||||
handleStyle: {
|
handleStyle: {
|
||||||
@ -176,71 +398,7 @@ export default {
|
|||||||
end: 35
|
end: 35
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: this.series
|
||||||
{
|
|
||||||
name: 'female',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
barMaxWidth: 35,
|
|
||||||
barGap: '10%',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'rgba(255,144,128,1)',
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
position: 'insideTop',
|
|
||||||
formatter (p) {
|
|
||||||
return p.value > 0 ? p.value : ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'male',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'rgba(0,191,183,1)',
|
|
||||||
barBorderRadius: 0,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
formatter (p) {
|
|
||||||
return p.value > 0 ? p.value : ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'average',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'total',
|
|
||||||
symbolSize: 10,
|
|
||||||
symbol: 'circle',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'rgba(252,230,48,1)',
|
|
||||||
barBorderRadius: 0,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
formatter (p) {
|
|
||||||
return p.value > 0 ? p.value : ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,21 +2,341 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-19 10:55:33
|
* @Date: 2021-11-19 10:55:33
|
||||||
* @LastEditors: gtz
|
* @LastEditors: gtz
|
||||||
* @LastEditTime: 2021-11-22 19:36:14
|
* @LastEditTime: 2021-11-25 19:30:06
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<chart height="100%" width="100%" />
|
<el-row>
|
||||||
|
<el-row style="margin: 20px 0" :gutter="20">
|
||||||
|
<el-col>
|
||||||
|
<h3>用电分析</h3>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row style="margin: 20px 0" :gutter="20">
|
||||||
|
<el-col style="width: 300px">
|
||||||
|
<el-card>
|
||||||
|
<p style="font-size: 18px">总电量（KW）：<strong style="font-size: 22px">123,109</strong></p>
|
||||||
|
<p>昨日用电量(KW)：1145</p>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col style="width: 300px">
|
||||||
|
<el-card>
|
||||||
|
<p style="font-size: 18px">总电流（A）：<strong style="font-size: 22px">123,109</strong></p>
|
||||||
|
<p>昨日用电流（A）：1145</p>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-row>
|
||||||
|
<el-row style="margin: 20px 0" :gutter="20">
|
||||||
|
<el-col style="margin: 20px 0">
|
||||||
|
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||||
|
<el-checkbox-button label="折线" />
|
||||||
|
<el-checkbox-button label="柱状" />
|
||||||
|
</el-checkbox-group>
|
||||||
|
<el-row style="float: right">
|
||||||
|
<el-radio-group v-model="eleType" @change="changeEleType">
|
||||||
|
<el-radio-button label="日"></el-radio-button>
|
||||||
|
<el-radio-button label="周"></el-radio-button>
|
||||||
|
<el-radio-button label="月"></el-radio-button>
|
||||||
|
<el-radio-button label="年"></el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="date"
|
||||||
|
:type="datePickerType[eleType].type"
|
||||||
|
:format="datePickerType[eleType].format"
|
||||||
|
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||||
|
/>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
<el-col style="height: 500px">
|
||||||
|
<chart height="100%" width="100%" :title="eleType" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col style="height: 500px">
|
||||||
|
<chart height="100%" width="100%" :title="eleType" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||||
|
</el-col>
|
||||||
|
<el-col style="margin: 20px 0">
|
||||||
|
<el-tabs type="border-card">
|
||||||
|
<el-tab-pane v-for="item in yaoluList" :key="item.id">
|
||||||
|
<span slot="label"><i class="el-icon-date"></i> 我的行程</span>
|
||||||
|
我的行程
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from '@/components/Charts/MixChart'
|
import Chart from '@/components/Charts/MixChart'
|
||||||
|
|
||||||
|
// 日发电数据
|
||||||
|
const eleDayList = [
|
||||||
|
{ time: '01:00', value: 22 },
|
||||||
|
{ time: '02:00', value: 12 },
|
||||||
|
{ time: '03:00', value: 32 },
|
||||||
|
{ time: '04:00', value: 52 },
|
||||||
|
{ time: '05:00', value: 22 },
|
||||||
|
{ time: '06:00', value: 12 },
|
||||||
|
{ time: '07:00', value: 42 },
|
||||||
|
{ time: '08:00', value: 32 },
|
||||||
|
{ time: '09:00', value: 22 },
|
||||||
|
{ time: '10:00', value: 12 },
|
||||||
|
{ time: '11:00', value: 12 },
|
||||||
|
{ time: '12:00', value: 52 },
|
||||||
|
{ time: '13:00', value: 62 },
|
||||||
|
{ time: '14:00', value: 62 },
|
||||||
|
{ time: '15:00', value: 32 },
|
||||||
|
{ time: '16:00', value: 22 },
|
||||||
|
{ time: '17:00', value: 12 },
|
||||||
|
{ time: '18:00', value: 2 },
|
||||||
|
{ time: '19:00', value: 92 },
|
||||||
|
{ time: '20:00', value: 12 },
|
||||||
|
{ time: '21:00', value: 52 },
|
||||||
|
{ time: '22:00', value: 26 },
|
||||||
|
{ time: '23:00', value: 21 },
|
||||||
|
{ time: '24:00', value: 28 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 前日发电数据
|
||||||
|
const lastEleDayList = [
|
||||||
|
{ time: '01:00', value: 22 },
|
||||||
|
{ time: '02:00', value: 62 },
|
||||||
|
{ time: '03:00', value: 23 },
|
||||||
|
{ time: '04:00', value: 25 },
|
||||||
|
{ time: '05:00', value: 72 },
|
||||||
|
{ time: '06:00', value: 21 },
|
||||||
|
{ time: '07:00', value: 24 },
|
||||||
|
{ time: '08:00', value: 23 },
|
||||||
|
{ time: '09:00', value: 20 },
|
||||||
|
{ time: '10:00', value: 14 },
|
||||||
|
{ time: '11:00', value: 18 },
|
||||||
|
{ time: '12:00', value: 72 },
|
||||||
|
{ time: '13:00', value: 22 },
|
||||||
|
{ time: '14:00', value: 12 },
|
||||||
|
{ time: '15:00', value: 62 },
|
||||||
|
{ time: '16:00', value: 72 },
|
||||||
|
{ time: '17:00', value: 22 },
|
||||||
|
{ time: '18:00', value: 46 },
|
||||||
|
{ time: '19:00', value: 52 },
|
||||||
|
{ time: '20:00', value: 22 },
|
||||||
|
{ time: '21:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 62 },
|
||||||
|
{ time: '23:00', value: 12 },
|
||||||
|
{ time: '24:00', value: 82 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 周发电数据
|
||||||
|
const eleWeekList = [
|
||||||
|
{ time: '周日', value: 22 },
|
||||||
|
{ time: '周一', value: 12 },
|
||||||
|
{ time: '周二', value: 32 },
|
||||||
|
{ time: '周三', value: 52 },
|
||||||
|
{ time: '周四', value: 22 },
|
||||||
|
{ time: '周五', value: 12 },
|
||||||
|
{ time: '周六', value: 42 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 上周发电数据
|
||||||
|
const lastEleWeekList = [
|
||||||
|
{ time: '周日', value: 111 },
|
||||||
|
{ time: '周一', value: 72 },
|
||||||
|
{ time: '周二', value: 312 },
|
||||||
|
{ time: '周三', value: 52 },
|
||||||
|
{ time: '周四', value: 82 },
|
||||||
|
{ time: '周五', value: 152 },
|
||||||
|
{ time: '周六', value: 52 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 月发电数据
|
||||||
|
const eleMonthList = [
|
||||||
|
{ time: '1日', value: 12 },
|
||||||
|
{ time: '2日', value: 12 },
|
||||||
|
{ time: '3日', value: 32 },
|
||||||
|
{ time: '4日', value: 52 },
|
||||||
|
{ time: '5日', value: 22 },
|
||||||
|
{ time: '6日', value: 12 },
|
||||||
|
{ time: '7日', value: 42 },
|
||||||
|
{ time: '8日', value: 32 },
|
||||||
|
{ time: '9日', value: 75 },
|
||||||
|
{ time: '10日', value: 124 },
|
||||||
|
{ time: '11日', value: 234 },
|
||||||
|
{ time: '12日', value: 542 },
|
||||||
|
{ time: '13日', value: 644 },
|
||||||
|
{ time: '14日', value: 62 },
|
||||||
|
{ time: '15日', value: 32 },
|
||||||
|
{ time: '16日', value: 565 },
|
||||||
|
{ time: '17日', value: 12 },
|
||||||
|
{ time: '18日', value: 2 },
|
||||||
|
{ time: '19日', value: 92 },
|
||||||
|
{ time: '20日', value: 12 },
|
||||||
|
{ time: '21日', value: 52 },
|
||||||
|
{ time: '22日', value: 176 },
|
||||||
|
{ time: '23日', value: 21 },
|
||||||
|
{ time: '24日', value: 64 },
|
||||||
|
{ time: '25日', value: 92 },
|
||||||
|
{ time: '26日', value: 124 },
|
||||||
|
{ time: '27日', value: 44 },
|
||||||
|
{ time: '28日', value: 226 },
|
||||||
|
{ time: '29日', value: 17 },
|
||||||
|
{ time: '30日', value: 28 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 上月发电数据
|
||||||
|
const lastEleMonthList = [
|
||||||
|
{ time: '1日', value: 22 },
|
||||||
|
{ time: '2日', value: 236 },
|
||||||
|
{ time: '3日', value: 32 },
|
||||||
|
{ time: '4日', value: 312 },
|
||||||
|
{ time: '5日', value: 22 },
|
||||||
|
{ time: '6日', value: 12 },
|
||||||
|
{ time: '7日', value: 42 },
|
||||||
|
{ time: '8日', value: 32 },
|
||||||
|
{ time: '9日', value: 22 },
|
||||||
|
{ time: '10日', value: 84 },
|
||||||
|
{ time: '11日', value: 25 },
|
||||||
|
{ time: '12日', value: 52 },
|
||||||
|
{ time: '13日', value: 122 },
|
||||||
|
{ time: '14日', value: 62 },
|
||||||
|
{ time: '15日', value: 32 },
|
||||||
|
{ time: '16日', value: 22 },
|
||||||
|
{ time: '17日', value: 12 },
|
||||||
|
{ time: '18日', value: 2 },
|
||||||
|
{ time: '19日', value: 92 },
|
||||||
|
{ time: '20日', value: 12 },
|
||||||
|
{ time: '21日', value: 52 },
|
||||||
|
{ time: '22日', value: 26 },
|
||||||
|
{ time: '23日', value: 81 },
|
||||||
|
{ time: '24日', value: 28 },
|
||||||
|
{ time: '25日', value: 52 },
|
||||||
|
{ time: '26日', value: 12 },
|
||||||
|
{ time: '27日', value: 47 },
|
||||||
|
{ time: '28日', value: 12 },
|
||||||
|
{ time: '29日', value: 21 },
|
||||||
|
{ time: '30日', value: 28 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 年发电数据
|
||||||
|
const eleYearList = [
|
||||||
|
{ time: '1月', value: 256 },
|
||||||
|
{ time: '2月', value: 12 },
|
||||||
|
{ time: '3月', value: 32 },
|
||||||
|
{ time: '4月', value: 52 },
|
||||||
|
{ time: '5月', value: 22 },
|
||||||
|
{ time: '6月', value: 12 },
|
||||||
|
{ time: '7月', value: 42 },
|
||||||
|
{ time: '8月', value: 32 },
|
||||||
|
{ time: '9月', value: 22 },
|
||||||
|
{ time: '10月', value: 12 },
|
||||||
|
{ time: '11月', value: 12 },
|
||||||
|
{ time: '12月', value: 52 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 去年发电数据
|
||||||
|
const lastEleYearList = [
|
||||||
|
{ time: '1月', value: 22 },
|
||||||
|
{ time: '2月', value: 12 },
|
||||||
|
{ time: '3月', value: 42 },
|
||||||
|
{ time: '4月', value: 52 },
|
||||||
|
{ time: '5月', value: 224 },
|
||||||
|
{ time: '6月', value: 12 },
|
||||||
|
{ time: '7月', value: 42 },
|
||||||
|
{ time: '8月', value: 32 },
|
||||||
|
{ time: '9月', value: 44 },
|
||||||
|
{ time: '10月', value: 12 },
|
||||||
|
{ time: '11月', value: 168 },
|
||||||
|
{ time: '12月', value: 51 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 日期类型
|
||||||
|
const datePickerType = {
|
||||||
|
'日': {
|
||||||
|
type: 'date',
|
||||||
|
format: '',
|
||||||
|
placeholder: '日期'
|
||||||
|
},
|
||||||
|
'周': {
|
||||||
|
type: 'date',
|
||||||
|
format: 'yyyy 第 W 周',
|
||||||
|
placeholder: '周'
|
||||||
|
},
|
||||||
|
'月': {
|
||||||
|
type: 'month',
|
||||||
|
format: '',
|
||||||
|
placeholder: '月'
|
||||||
|
},
|
||||||
|
'年': {
|
||||||
|
type: 'year',
|
||||||
|
format: '',
|
||||||
|
placeholder: '年'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 窑炉列表
|
||||||
|
const yaoluList = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '窑炉1',
|
||||||
|
value: 56,
|
||||||
|
data: [
|
||||||
|
{ }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'electric',
|
name: 'electric',
|
||||||
components: { Chart }
|
components: { Chart },
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
eleDayList,
|
||||||
|
eleWeekList,
|
||||||
|
eleMonthList,
|
||||||
|
eleYearList,
|
||||||
|
lastEleDayList,
|
||||||
|
lastEleWeekList,
|
||||||
|
lastEleMonthList,
|
||||||
|
lastEleYearList,
|
||||||
|
datePickerType,
|
||||||
|
yaoluList,
|
||||||
|
date: new Date(),
|
||||||
|
dataList: [],
|
||||||
|
lastDataList: [],
|
||||||
|
chartType: ['柱状'],
|
||||||
|
eleType: '年'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.dataList = this.eleDayList
|
||||||
|
this.lastDataList = this.lastEleDayList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.dataList = this.eleWeekList
|
||||||
|
this.lastDataList = this.lastEleWeekList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.dataList = this.eleMonthList
|
||||||
|
this.lastDataList = this.lastEleMonthList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -24,7 +344,7 @@ export default {
|
|||||||
.chart-container {
|
.chart-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 84px);
|
min-height: calc(100vh - 124px);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user