242 lines
5.6 KiB
Vue
242 lines
5.6 KiB
Vue
|
||
<template>
|
||
<div class="width-auto">
|
||
<view class="flexs">
|
||
<view class="title">
|
||
{{'真实业绩'}}
|
||
</view>
|
||
<view class="select-flexs">
|
||
<picker :range="selMounthList"
|
||
:value="index"
|
||
range-key="label"
|
||
@change="bindPickerChange">
|
||
<view style="display: flex;">
|
||
<view style="margin-right: 10rpx;">{{whatMounth}}月</view>
|
||
<u-icon name="arrow-down" color="#999"></u-icon>
|
||
</view>
|
||
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<div id="mounthData1"
|
||
style="width: 690rpx; height: 600rpx;margin-left: 30rpx;">
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import {getPerformance} from "@/config/distribute.js";
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
props:{
|
||
time: {
|
||
type: Number,
|
||
// 定义是否必须传
|
||
required: false,
|
||
},
|
||
},
|
||
data(){
|
||
return{
|
||
index:0,
|
||
show:false,
|
||
list:{},
|
||
whatMounth:'',
|
||
mounthList: [
|
||
{
|
||
value: 1,
|
||
label: '1月',
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '2月',
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '3月',
|
||
},
|
||
{
|
||
value: 4,
|
||
label: '4月',
|
||
},
|
||
{
|
||
value: 5,
|
||
label: '5月',
|
||
},
|
||
{
|
||
value: 6,
|
||
label: '6月',
|
||
},
|
||
{
|
||
value: 7,
|
||
label: '7月',
|
||
},
|
||
{
|
||
value: 8,
|
||
label: '8月',
|
||
},
|
||
{
|
||
value: 9,
|
||
label: '9月',
|
||
},
|
||
{
|
||
value: 10,
|
||
label: '10月',
|
||
},
|
||
{
|
||
value: 11,
|
||
label: '11月',
|
||
},
|
||
{
|
||
value: 12,
|
||
label: '12月',
|
||
},
|
||
],
|
||
}
|
||
},
|
||
created() {
|
||
console.error(this.$echarts)
|
||
this.getMounth()
|
||
setTimeout(()=>{
|
||
this.upDateCover()
|
||
},50)
|
||
},
|
||
methods: {
|
||
bindPickerChange(e) {
|
||
this.whatMounth = e.detail.value+1
|
||
this.upDateCover()
|
||
},
|
||
// 获取当前月
|
||
getMounth() {
|
||
this.whatMounth = new Date().getMonth() + 1
|
||
let selMounth = []
|
||
this.mounthList.forEach((item) => {
|
||
if (item.value <= this.whatMounth) {
|
||
selMounth.push(item)
|
||
}
|
||
})
|
||
this.selMounthList = selMounth
|
||
},
|
||
upDateCover(val) {
|
||
let arr2=[]
|
||
let arr3=[]
|
||
getPerformance({
|
||
month: this.whatMounth,
|
||
})
|
||
.then((res) => {
|
||
arr2.push(res.data.leftGrandTotal)
|
||
arr2.push(res.data.firstLeftPurchaseTotal)
|
||
arr2.push(res.data.firstLeftRepurchaseTotal)
|
||
arr3.push(res.data.rightGrandTotal)
|
||
arr3.push(res.data.firstRightPurchaseTotal)
|
||
arr3.push(res.data.firstRightRepurchaseTotal)
|
||
// arr2.push(3)
|
||
// arr2.push(5)
|
||
// arr2.push(10)
|
||
// arr3.push(3)
|
||
// arr3.push(5)
|
||
// arr3.push(10)
|
||
this.drawChart(arr2, arr3)
|
||
})
|
||
},
|
||
drawChart(arr2, arr3) {
|
||
let arr1 =["累计业绩","首购累计业绩","复购累计业绩"]
|
||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
|
||
let myChart = echarts.init(document.getElementById('mounthData1'))
|
||
// 指定图表的配置项和数据
|
||
let option = {
|
||
title: {
|
||
text: '',
|
||
subtext: '业绩(万)',
|
||
left:0,
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
top: 'bottom',
|
||
data: ['左区', '右区'],
|
||
bottom:0,
|
||
},
|
||
xAxis: {
|
||
data: arr1,
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontSize: "10",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: {
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontSize: "8",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
},
|
||
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '左区',
|
||
type: 'bar',
|
||
data: arr2,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: [10, 10, 0, 0],
|
||
color: '#01C291',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '右区',
|
||
type: 'bar',
|
||
data: arr3,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: [10, 10, 0, 0],
|
||
color: '#FE4C4B',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
}
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.select-flexs{
|
||
padding: 15rpx 0;
|
||
display: flex;
|
||
}
|
||
.flexs{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 10rpx solid #f3f3f3;
|
||
padding: 20rpx 30rpx ;
|
||
/* width: 650rpx; */
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
background-color: #fff;
|
||
|
||
}
|
||
.title{
|
||
padding: 10rpx 0;
|
||
margin-top: 10rpx;
|
||
}
|
||
.width-auto{
|
||
width: 690rpx;
|
||
height:800rpx;
|
||
background-color: #fff;
|
||
margin: 20rpx auto;
|
||
border-radius: 30rpx;
|
||
}
|
||
</style> |