From d8bff9dff0c9c0c8e88e9e4be85c66de2b5b43ff Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期五, 19 三月 2021 15:34:45 +0800
Subject: [PATCH] 数据模块对接
---
src/components/charts/latticeBar.vue | 74 +++++++++++++++++++++++++++++++------
1 files changed, 62 insertions(+), 12 deletions(-)
diff --git a/src/components/charts/latticeBar.vue b/src/components/charts/latticeBar.vue
index da6d2ba..7f83cbb 100644
--- a/src/components/charts/latticeBar.vue
+++ b/src/components/charts/latticeBar.vue
@@ -11,6 +11,9 @@
import {
chartFontsize
} from '@/assets/js/chartFontsize'
+ import {
+ chargeAnalysis
+ } from '@/assets/js/api'
export default {
name: "latticeBar",
chart: "",
@@ -31,8 +34,7 @@
setOption(opt) {
this.$options.chart.setOption(opt);
},
- setData(sendData) {
- this.$options.chartData = sendData;
+ organizeData(data) {
let option = {
tooltip: {
trigger: 'axis',
@@ -103,9 +105,8 @@
}],
series: []
};
-
let max;
- sendData.series.map(item => {
+ data.series.map(item => {
max = item.data[0];
item.data.map(jtem => {
if (jtem > max) {
@@ -114,15 +115,15 @@
})
});
option.yAxis[0].max = max;
- option.xAxis[0].data = sendData.xData;
+ option.xAxis[0].data = data.xData;
let legendData = [];
- sendData.series.map(item => {
+ data.series.map(item => {
legendData.push(item.name);
})
option.legend.data = legendData;
- for (let i = 0; i < sendData.series.length; i++) {
+ for (let i = 0; i < data.series.length; i++) {
let maxArr = [];
- sendData.series[i].data.map(() => {
+ data.series[i].data.map(() => {
maxArr.push(max)
})
let plusMinus = (i % 2);
@@ -133,11 +134,11 @@
offset = '65%'
}
option.series.push({
- name: sendData.series[i].name,
+ name: data.series[i].name,
type: 'pictorialBar',
symbol: 'roundRect',
itemStyle: {
- color: sendData.series[i].color
+ color: data.series[i].color
},
symbolRepeat: true,
symbolSize: ["16%", "4%"],
@@ -145,7 +146,7 @@
symbolPosition: 'start',
symbolOffset: [offset, 0],
z: -20,
- data: sendData.series[i].data,
+ data: data.series[i].data,
});
option.series.push({
name: 'bg',
@@ -166,10 +167,59 @@
// 璁剧疆閰嶇疆椤�
this.setOption(option);
},
+ setData(sendData) {
+ if (sendData) {
+ this.$options.chartData = sendData;
+ this.organizeData(sendData)
+ } else {
+ let userId = localStorage.getItem('userId');
+ let params = {
+ userId: userId
+ }
+ chargeAnalysis(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = {
+ xData: [],
+ series: [{
+ name: '鏀剧數',
+ data: [],
+ color: '#90ec7d'
+ }, {
+ name: '鍏呯數',
+ data: [],
+ color: '#ff6b6b'
+ }]
+ }
+ let resData = res.data.data;
+ for (let key in resData.reCharge) {
+ if (typeof resData.reCharge[key] == 'string') {
+ optionData.series[0].data.push(Number(resData.reCharge[key].split('%')[0]))
+ } else {
+ optionData.series[0].data.push(resData.reCharge[key])
+ }
+ }
+ for (let key in resData.disCharge) {
+ optionData.xData.push(key)
+ if (typeof resData.disCharge[key] == 'string') {
+ optionData.series[1].data.push(Number(resData.disCharge[key].split('%')[0]))
+ } else {
+ optionData.series[1].data.push(resData.disCharge[key])
+ }
+ }
+ this.$options.chartData = optionData;
+ this.organizeData(optionData)
+ }
+ }).catch((err) => {
+ console.log(err)
+ });
+ }
+ },
resize() {
setTimeout(() => {
this.$options.chart.resize();
- this.setData(this.$options.chartData);
+ if (JSON.stringify(this.$options.chartData) != '{}') {
+ this.setData(this.$options.chartData);
+ }
}, 300)
}
},
--
Gitblit v1.9.1