From abcc75f669a2d90a2ae60b04810154782b74c308 Mon Sep 17 00:00:00 2001 From: gtz217 <535262213@qq.com> Date: Thu, 25 Nov 2021 20:06:07 +0800 Subject: [PATCH] update --- src/components/Charts/MixChart.vue | 328 +++++++++++++++++++++-------- src/views/energy/electric.vue | 328 ++++++++++++++++++++++++++++- 2 files changed, 567 insertions(+), 89 deletions(-) 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: --> @@ -24,7 +344,7 @@ export default { .chart-container { position: relative; width: 100%; - height: calc(100vh - 84px); + min-height: calc(100vh - 124px); }