web-store-retail-h5/components/distribution/gradePerformance.vue

<template>
    <div class="width-auto">
        <div class="title">{{$t('N_I_123')}}</div>
        <div class="left-s">
            <div id="mounthData3" :style="myChartStyle">

            </div>
        </div>
        <view class="flex-s">
            <div class="item-s" v-for="item in gradeLists"  v-if="item.name">
                <div>
                    <div class="bg-color" :style="{background:`${item.color}`}"></div>
                    <div style="color: #333;text-align: center;">{{item.name}}</div>
                </div>
            </div>
        </view>
    </div>
</template>

<script>
import * as echarts from "echarts";
import * as api from '@/config/distribute.js'
import {parentAchieveLeft, parentAchieveRight, systemGrandeRange} from "@/config/distribute.js";
export default {
    data() {
        return {
            myChartStyle: {
                width: "550rpx",
                height: "1000rpx",
                margin: "120rpx 0 10rpx 70rpx",
            }, //图表样式
            gradeList:[],
            gradeLists:[],
            barList:[]
        }
    },
    created(){
        this.upDateCover2()

        this.systemGrandeRange()
    },
    methods: {
        systemGrandeRange() {
            // 所有等级名称
            systemGrandeRange().then((res) => {
                let _barList = {id: [], name: [],color:[]}
                res.data.forEach((item) => {
                    _barList.id.push(item.pkId)
                    _barList.name.push(item.gradeName)
                    _barList.color.push(item.color)
                });
                this.barList = _barList
            })
        },
        sortBy(array, field, sort = "asc"){
            const sortOpt = {
                asc: (a, b, sortField) => a[sortField] - b[sortField],
                desc: (a, b, sortField) => b[sortField] - a[sortField],
            };
            array.sort((a, b) => sortOpt[sort](a, b, field));
            return array;
        },
        upDateCover2(val) {
            api
                .parentAchieveRight({
					 month:val? val.startDate :this.getStartTime(),
					  // startDate:val? val.startDate :this.getStartTime(),
					  // endDate: val?val.endDate:this.getEndTime(),
                    // startDate:val? val[0] :'2023-06-01',
                    // endDate: val?val[1]:'2023-06-29',
                })
                .then((res) => {
                    var arr= 0
                    res.data.list.forEach((item)=>{
                        item.name = item.pkGradeKeyVal
                        item.value = item.peopleNumber
                        item.color = item.color
                        arr+=item.peopleNumber

                    })
                    // 根据返回的value值重新进行排序
                    let lists =this.sortBy(res.data.list, "gradeValue")
                    lists.forEach((items)=>{
                        this.gradeList.push(items.color)
                    })
                   this.gradeLists = res.data.list
                    this.drawChart(res.data,res.data.list,arr)
                })
        },
        getStartTime() {
            let date = new Date()
            date.setDate(1) // 将当前时间的日期设置成第一天
            let year = date.getFullYear() // 得到当前年份
            let month = date.getMonth() + 1 // 得到当前月份（0-11月份，+1是当前月份）
            month = month > 9 ? month : '0' + month // 补零
            return year + '-' + month
        },
        getEndTime() {
            var date = new Date();
            var year = date.getFullYear() // 年
            var month = date.getMonth() + 1; // 月
            var day = date.getDate() >1 ?date.getDate()-1:date.getDate(); // 日
            var hour = date.getHours(); // 时
            var minutes = date.getMinutes(); // 分
            var seconds = date.getSeconds() //秒
            // 给一位数的数据前面加 “0”
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (day >= 0 && day <= 9) {
                day = "0" + day;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minutes >= 0 && minutes <= 9) {
                minutes = "0" + minutes;
            }
            if (seconds >= 0 && seconds <= 9) {
                seconds = "0" + seconds;
            }
            return year + "-" + month + "-" + day + " "
        },
        drawChart(arr1, arr2,arr3) {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = echarts.init(document.getElementById('mounthData3'))
			let that = this
            // 指定图表的配置项和数据
            let option = {
                // legend: {
                //     bottom: '0',
                //     width: '690rpx',
                //     // height: '300px',
                //     // itemGap: 15, //间隔
                //     itemWidth: 40, // 宽
                //     itemHeight: 20,// 高
                //     formatter: (name) => {
                //         // console.error(name)
                //         return name
                //     },
                // },
                series: [
                    {
                        top:"1%",
                        type: 'pie',
                        radius: ['50%', '100%'],
                        data: arr2,
                        color:that.gradeList,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 15,
                                lineHeight: 30,
                                formatter: function(data){
                                    return (
                                        data.data.name  + ' ' +
                                        data.data.peopleNumber +
                                        that.$t('w_0337') +
                                        "\n " +
                                        that.$t('ENU_TOTAL_V_1') + ':' +
                                        data.data.achieve+
                                        "\n " +
                                        that.$t('w_0338') + ':' +
                                        Math.round((parseInt(data.data.peopleNumber))  / arr3 * 10000) / 100 + "%"
                                    );
                                }
                            }
                        },
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
    },
}
</script>

<style lang="scss" scoped>
.item-s{
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    // width: 100%;
    line-height: 30px;
    margin-left: 20rpx;
    // margin-right: 20rpx;
}
.item-s:nth-child(1){
    margin-left: 0;
}
.bg-color{
    width: 40px;
    height: 20px;
    border-radius: 4px;
    margin: 0 auto;
}
.flex-s{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    //align-items: center;
    text-align: center;
    background-color: #fff;
    position: absolute;
    //justify-content: center;
    top: 150rpx;
    // height: 80rpx;
    // line-height: 80rpx;
}
	.width-auto{
	  width: 690rpx;
		position: relative;
		height:1150rpx;
		background-color: #fff;

			border-radius: 20rpx;
			margin: 20rpx auto;
	}
	.title{
		padding: 20rpx 30rpx ;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 10rpx solid #f3f3f3;
		margin-top: 10rpx;
		font-size: 28rpx;
		display: flex;
	}
.left-s{
    //margin-left:80rpx;
    margin-top: 0px;
    position: relative;
}
</style>