diff --git a/src/components/Charts/MixChart.vue b/src/components/Charts/MixChart.vue
index 0173888..85f1791 100644
--- a/src/components/Charts/MixChart.vue
+++ b/src/components/Charts/MixChart.vue
@@ -29,23 +29,31 @@ export default {
type: String,
default: 'Mix-Chart'
},
- nameData: {
- type: Array,
- default: []
- },
dataList: {
type: Array,
- default: []
+ default: () => {
+ return []
+ }
+ },
+ lastDataList: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ chartType: {
+ type: Array,
+ default: () => {
+ return []
+ }
}
},
data () {
return {
- chart: null
+ chart: null,
+ series: []
}
},
- mounted () {
- this.initChart()
- },
beforeDestroy () {
if (!this.chart) {
return
@@ -53,20 +61,232 @@ export default {
this.chart.dispose()
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: {
initChart () {
+ if (this.chart) {
+ this.chart.dispose()
+ }
this.chart = echarts.init(document.getElementById(this.id))
- const xData = (function () {
- const data = []
- for (let i = 1; i < 13; i++) {
- data.push(i + 'month')
- }
- return data
- })()
+ const xData = this.dataList.map(item => {
+ return item.time
+ })
this.chart.setOption({
backgroundColor: '#344b58',
title: {
- text: this.title,
+ text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.title + '用电量',
x: '20',
top: '20',
textStyle: {
@@ -102,7 +322,9 @@ export default {
textStyle: {
color: '#90979c'
},
- data: this.nameData
+ data: this.series.map(item => {
+ return item.name
+ })
},
calculable: true,
xAxis: [
@@ -156,8 +378,8 @@ export default {
height: 30,
xAxisIndex: [0],
bottom: 30,
- start: 10,
- end: 80,
+ start: 0,
+ 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',
handleSize: '110%',
handleStyle: {
@@ -176,71 +398,7 @@ export default {
end: 35
}
],
- 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]
- }
- ]
+ series: this.series
})
}
}
diff --git a/src/views/energy/electric.vue b/src/views/energy/electric.vue
index 87003b4..abc1a40 100644
--- a/src/views/energy/electric.vue
+++ b/src/views/energy/electric.vue
@@ -2,21 +2,341 @@
* @Author: zwq
* @Date: 2021-11-19 10:55:33
* @LastEditors: gtz
- * @LastEditTime: 2021-11-22 19:36:14
+ * @LastEditTime: 2021-11-25 19:30:06
* @Description:
-->
-
+
+
+
+ 用电分析
+
+
+
+
+
+ 总电量（KW）：123,109
+ 昨日用电量(KW)：1145
+
+
+
+
+ 总电流（A）：123,109
+ 昨日用电流（A）：1145
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 我的行程
+ 我的行程
+
+
+
+