From 7f3ed13bfca7f51f292514d03f69d6745e24a2bf Mon Sep 17 00:00:00 2001
From: yuanyufei <1780048921@qq.com>
Date: Mon, 21 Mar 2022 18:02:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BEbug=E4=BF=AE?=
=?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.env.development | 4 +-
src/views/dashboard/LineChart.vue | 125 ++++++++++++++++++------------
src/views/index.vue | 2 +-
3 files changed, 79 insertions(+), 52 deletions(-)
diff --git a/.env.development b/.env.development
index bb10521..85eee28 100644
--- a/.env.development
+++ b/.env.development
@@ -2,10 +2,10 @@
ENV = 'development'
# dev环境
-VUE_APP_BASE_API = 'http://192.168.111.240:6605/api/v1'
+#VUE_APP_BASE_API = 'http://192.168.111.240:6605/api/v1'
# 测试环境
-#VUE_APP_BASE_API = 'http://192.168.26.179:6605/api/v1'
+VUE_APP_BASE_API = 'http://192.168.26.179:6605/api/v1'
# æ–‡æ¡£æ¨¡å— ç›´æŽ¥è°ƒç”¨ sys开放接å£
VUE_APP_BASE_SYS_API = 'http://sysapi.jxhh.com'
diff --git a/src/views/dashboard/LineChart.vue b/src/views/dashboard/LineChart.vue
index 34068b2..41a355f 100644
--- a/src/views/dashboard/LineChart.vue
+++ b/src/views/dashboard/LineChart.vue
@@ -26,34 +26,26 @@ export default {
type: Boolean,
default: true
},
- numberData: {
+ chartData: {
type: Object,
required: true
}
},
data() {
return {
- dateArr: [],
- yAsix:10000,
+ chart: null
}
},
watch: {
- numberData: {
+ chartData: {
deep: true,
handler(val) {
- this.dateArr= val.date
- this.numberMax(this.numberData.ordercount,this.numberData.customerprice)
this.setOptions(val)
+ // debugger
}
}
},
- created() {
- this.$nextTick(() => {
- this.initChart()
- })
- },
mounted() {
-
this.$nextTick(() => {
this.initChart()
})
@@ -66,30 +58,52 @@ export default {
this.chart = null
},
methods: {
+ moneyMax(num){
+ let maxNumVal=Math.max.apply(null,num)
+ let prec = 2
+ let ceil = true
+ const len = String(maxNumVal).length;
+ console.log(len,'22')
+ console.log(maxNumVal,'9999')
+ if (len <= prec) { return maxNumVal };
+ const mult = Math.pow(10, prec);
+ return ceil ?
+ Math.ceil(maxNumVal / mult) * mult :
+ Math.floor(maxNumVal / mult) * mult;
+
+ },
numberMax(num1,num2){
- if(num1,num2){
- let result = num1.every(function(item,index,array){
- return item == 0
- })
- let result2 = num2.every(function(item,index,array){
- return item == 0
- })
- if(result||result2){
- this.yAsix=100
- }else{
- var c = num1.concat(num2)
- this.yAsix = Math.ceil(Math.max(...c))
- }
+ let maxNum1=Math.max.apply(null,num1)
+ let maxNum2=Math.max.apply(null,num2)
+ let num = ''
+ if(maxNum1>=maxNum2){
+ num = maxNum1
+ }else{
+ num = maxNum2
}
+ let prec = 2
+ let ceil = true
+ const len = String(num).length;
+ if (len <= prec) { return num };
+ const mult = Math.pow(10, prec);
+ return ceil ?
+ Math.ceil(num / mult) * mult :
+ Math.floor(num / mult) * mult;
+
},
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
- this.setOptions(this.numberData)
+ // debugger
+ // if(this.chartData.months){
+
+ this.setOptions(this.chartData)
+ // }
},
- setOptions({ordercount,customerprice,ordertotal,customerArr,dateArr,retentionArr} = {}) {
+ setOptions({ customerprice, ordercount, ordertotal,date} = {}) {
this.chart.setOption({
xAxis: {
- data: this.dateArr,
+ type: 'category',
+ data: date,
boundaryGap: true,
axisTick: {
show: true
@@ -114,36 +128,53 @@ export default {
type: 'value',
name: '交易é‡',
min: 0,
- max: this.yAsix,
- interval: Math.ceil(this.yAsix/5),
+ max: this.numberMax(this.chartData.customerprice,this.chartData.ordercount)<10?10:this.numberMax(this.chartData.customerprice,this.chartData.ordercount),
+ interval: this.numberMax(this.chartData.customerprice,this.chartData.ordercount)<10?2:(this.numberMax(this.chartData.customerprice,this.chartData.ordercount))/5,
axisLabel: {
formatter: '{value}'
}
},
+ {
+ type: 'value',
+ name: '总订å•é‡‘é¢',
+ min: 0,
+ max: this.moneyMax(this.chartData.ordertotal)<10?10:this.moneyMax(this.chartData.ordertotal),
+ interval: this.moneyMax(this.chartData.ordertotal)<10?2:(this.moneyMax(this.chartData.ordertotal))/5,
+ axisLabel: {
+ formatter: '{value} å…ƒ'
+ }
+ }
+
],
- legend: {
- data: ['总订å•æ•°','总订å•é‡‘é¢','客å•ä»·']
+ legend: {
+ data: ['总订å•æ•°', '总订å•é‡‘é¢','客å•ä»·']
},
- series: [{
- name: '总订å•æ•°', itemStyle: {
+ series: [
+ {
+ name: '总订å•æ•°',
+ smooth: false,
+ type: 'bar',
+ itemStyle: {
normal: {
- color: '#4784FF',
+ color: '#3A64E4',
lineStyle: {
- color: '#4784FF',
- width: 2
+ color: '#3A64E4',
+ width: 1
+ },
+ areaStyle: {
+ color: '#f3f8ff'
}
}
},
- smooth: true,
- type: 'bar',
data: ordercount,
animationDuration: 2800,
animationEasing: 'quadraticOut'
},
{
name: '总订å•é‡‘é¢',
- smooth: true,
+ smooth: false,
type: 'line',
+ yAxisIndex: 1,
itemStyle: {
normal: {
color: '#EE7945',
@@ -151,20 +182,18 @@ export default {
color: '#EE7945',
width: 2
},
- areaStyle: {
- color: '#f3f8ff'
- }
+
}
},
data: ordertotal,
animationDuration: 2800,
- animationEasing: 'cubicInOut'
+ animationEasing: 'quadraticOut'
},
{
name: '客å•ä»·',
- smooth: true,
+ smooth: false,
type: 'bar',
- // yAxisIndex: 1,
+ yAxisIndex: 0,
itemStyle: {
normal: {
color: '#49D3CE',
@@ -172,9 +201,7 @@ export default {
color: '#49D3CE',
width: 2
},
- areaStyle: {
- color: '#f3f8ff'
- }
+
}
},
data: customerprice,
diff --git a/src/views/index.vue b/src/views/index.vue
index a416983..e6cd1a5 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -149,7 +149,7 @@
</div>
</div>
<div style="margin-top:38px;padding:16px 16px 0;" v-show="isShowData">
- <line-chart :number-data="numberChartData"/>
+ <line-chart :chart-data="numberChartData"/>
</div>
<div style="margin-top:38px;padding:16px 16px 0;" v-show="!isShowData">
<el-table
--
2.18.1