<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
//接收传过来的数据
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
// debugger
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
moneyMax(num){
let maxNumVal=Math.max.apply(null,num)
let prec = 2
let ceil = true
const len = String(maxNumVal).length;
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){
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.chartData)
},
setOptions({ customerprice, ordercount, ordertotal,date} = {}) {
this.chart.setOption({
xAxis: {
type: 'category',
data: date,
boundaryGap: true,
axisTick: {
show: true
}
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 30,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: [
{
type: 'value',
name: '交易量',
min: 0,
//这是主要点
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: ['总订单数', '总订单金额','客单价']
},
series: [
{
name: '总订单数',
smooth: false,
type: 'bar',
itemStyle: {
normal: {
color: '#3A64E4',
lineStyle: {
color: '#3A64E4',
width: 1
},
areaStyle: {
color: '#f3f8ff'
}
}
},
data: ordercount,
animationDuration: 2800,
animationEasing: 'quadraticOut'
},
{
name: '总订单金额',
smooth: false,
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#EE7945',
lineStyle: {
color: '#EE7945',
width: 2
},
}
},
data: ordertotal,
animationDuration: 2800,
animationEasing: 'quadraticOut'
},
{
name: '客单价',
smooth: false,
type: 'bar',
yAxisIndex: 0,
itemStyle: {
normal: {
color: '#49D3CE',
lineStyle: {
color: '#49D3CE',
width: 2
},
}
},
data: customerprice,
animationDuration: 2800,
animationEasing: 'quadraticOut'
}]
})
}
}
}
</script>