<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) } } }, mounted() { this.$nextTick(() => { this.initChart() }) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { moneyMax(num) { 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; }, numberMax(num1,num2){ let num = '' if (num1 >= num2) { num = num1 } else { num = num2 } 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') if(this.chartData.months){ this.setOptions(this.chartData) } }, setOptions({ expectedData, actualData, moneyData, months} = {}) { this.chart.setOption({ xAxis: { data: months, boundaryGap: false, 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.maxAccountData,this.chartData.maxChannelData)<10?10:this.numberMax(this.chartData.maxAccountData,this.chartData.maxChannelData), interval: this.numberMax(this.chartData.maxAccountData,this.chartData.maxChannelData)<10?2:(this.numberMax(this.chartData.maxAccountData,this.chartData.maxChannelData))/5, axisLabel: { formatter: '{value} ' } }, { type: 'value', name: '收益', min: 0, max: this.moneyMax(this.chartData.maxMoneyData), interval: (this.moneyMax(this.chartData.maxMoneyData) / 5), axisLabel: { formatter: '{value} 元' } } ], legend: { data: [ '订单','收益'] }, series: [{ name: '订单', smooth: true, type: 'line', itemStyle: { normal: { color: '#3888fa', lineStyle: { color: '#3888fa', width: 2 }, areaStyle: { color: '#f3f8ff' } } }, data: actualData, animationDuration: 2800, animationEasing: 'quadraticOut' }, { name: '收益', smooth: true, type: 'line', yAxisIndex: 1, itemStyle: { normal: { color: '#40c9c6', lineStyle: { color: '#40c9c6', width: 2 }, areaStyle: { color: '#f3f8ff' } } }, data: moneyData, animationDuration: 2800, animationEasing: 'quadraticOut' }] }) } } } </script>