Skip to content

S
shop-new
提交 7f3ed13b authored 作者: yuanyufei's avatar yuanyufei
浏览文件
操作

折线图bug修改

上级 f61b4ab8
隐藏空白字符变更
内嵌 并排
正在显示 包含 79 行增加 和 52 行删除
.env.development
浏览文件 @ 7f3ed13b
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
ENV = 'development' ENV = 'development'
# dev环境 # 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开放接口 # 文档模块 直接调用 sys开放接口
VUE_APP_BASE_SYS_API = 'http://sysapi.jxhh.com' VUE_APP_BASE_SYS_API = 'http://sysapi.jxhh.com'
......
src/views/dashboard/LineChart.vue
浏览文件 @ 7f3ed13b
...@@ -26,34 +26,26 @@ export default { ...@@ -26,34 +26,26 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
numberData: { chartData: {
type: Object, type: Object,
required: true required: true
} }
}, },
data() { data() {
return { return {
dateArr: [], chart: null
yAsix:10000,
} }
}, },
watch: { watch: {
numberData: { chartData: {
deep: true, deep: true,
handler(val) { handler(val) {
this.dateArr= val.date
this.numberMax(this.numberData.ordercount,this.numberData.customerprice)
this.setOptions(val) this.setOptions(val)
// debugger
} }
} }
}, },
created() {
this.$nextTick(() => {
this.initChart()
})
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart()
}) })
...@@ -66,30 +58,52 @@ export default { ...@@ -66,30 +58,52 @@ export default {
this.chart = null this.chart = null
}, },
methods: { 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){ numberMax(num1,num2){
if(num1,num2){ let maxNum1=Math.max.apply(null,num1)
let result = num1.every(function(item,index,array){ let maxNum2=Math.max.apply(null,num2)
return item == 0 let num = ''
}) if(maxNum1>=maxNum2){
let result2 = num2.every(function(item,index,array){ num = maxNum1
return item == 0 }else{
}) num = maxNum2
if(result||result2){
this.yAsix=100
}else{
var c = num1.concat(num2)
this.yAsix = Math.ceil(Math.max(...c))
}
} }
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() { initChart() {
this.chart = echarts.init(this.$el, 'macarons') 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({ this.chart.setOption({
xAxis: { xAxis: {
data: this.dateArr, type: 'category',
data: date,
boundaryGap: true, boundaryGap: true,
axisTick: { axisTick: {
show: true show: true
...@@ -114,36 +128,53 @@ export default { ...@@ -114,36 +128,53 @@ export default {
type: 'value', type: 'value',
name: '交易量', name: '交易量',
min: 0, min: 0,
max: this.yAsix, max: this.numberMax(this.chartData.customerprice,this.chartData.ordercount)<10?10:this.numberMax(this.chartData.customerprice,this.chartData.ordercount),
interval: Math.ceil(this.yAsix/5), interval: this.numberMax(this.chartData.customerprice,this.chartData.ordercount)<10?2:(this.numberMax(this.chartData.customerprice,this.chartData.ordercount))/5,
axisLabel: { axisLabel: {
formatter: '{value}' 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: { legend: {
data: ['总订单数','总订单金额','客单价'] data: ['总订单数', '总订单金额','客单价']
}, },
series: [{ series: [
name: '总订单数', itemStyle: { {
name: '总订单数',
smooth: false,
type: 'bar',
itemStyle: {
normal: { normal: {
color: '#4784FF', color: '#3A64E4',
lineStyle: { lineStyle: {
color: '#4784FF', color: '#3A64E4',
width: 2 width: 1
},
areaStyle: {
color: '#f3f8ff'
} }
} }
}, },
smooth: true,
type: 'bar',
data: ordercount, data: ordercount,
animationDuration: 2800, animationDuration: 2800,
animationEasing: 'quadraticOut' animationEasing: 'quadraticOut'
}, },
{ {
name: '总订单金额', name: '总订单金额',
smooth: true, smooth: false,
type: 'line', type: 'line',
yAxisIndex: 1,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#EE7945', color: '#EE7945',
...@@ -151,20 +182,18 @@ export default { ...@@ -151,20 +182,18 @@ export default {
color: '#EE7945', color: '#EE7945',
width: 2 width: 2
}, },
areaStyle: {
color: '#f3f8ff'
}
} }
}, },
data: ordertotal, data: ordertotal,
animationDuration: 2800, animationDuration: 2800,
animationEasing: 'cubicInOut' animationEasing: 'quadraticOut'
}, },
{ {
name: '客单价', name: '客单价',
smooth: true, smooth: false,
type: 'bar', type: 'bar',
// yAxisIndex: 1, yAxisIndex: 0,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#49D3CE', color: '#49D3CE',
...@@ -172,9 +201,7 @@ export default { ...@@ -172,9 +201,7 @@ export default {
color: '#49D3CE', color: '#49D3CE',
width: 2 width: 2
}, },
areaStyle: {
color: '#f3f8ff'
}
} }
}, },
data: customerprice, data: customerprice,
......
src/views/index.vue
浏览文件 @ 7f3ed13b
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
</div> </div>
</div> </div>
<div style="margin-top:38px;padding:16px 16px 0;" v-show="isShowData"> <div style="margin-top:38px;padding:16px 16px 0;" v-show="isShowData">
<line-chart :number-data="numberChartData"/> <line-chart :chart-data="numberChartData"/>
</div> </div>
<div style="margin-top:38px;padding:16px 16px 0;" v-show="!isShowData"> <div style="margin-top:38px;padding:16px 16px 0;" v-show="!isShowData">
<el-table <el-table
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论