web-base-h5/components/distribution/realPerformances.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>