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

<template>
    <div class="width-auto" style="position: relative">
		<div class="title" style="display: flex;">
			<div>{{'推荐平均用时'}}</div>
			<div style="color:rgb(102, 102, 102);font-size: 14rpx;margin-left: 30rpx;">{{ '会员本次推荐与下次推荐平均间隔的时长' }}</div>
		</div>
        <div class="right-lines">
            <div class="item-s" v-for="item in list">
                <div>{{item.name}}</div>
                <div class="bg-color" :style="{backgroundColor:`${item.color}`}"></div>
            </div>
        </div>
        <div id="mycharts" style="width: 690rpx;height: 600rpx;"  :style="myChartStyle"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { getMemberRecommend  } from "@/config/distribute.js";
import {formatSeconds} from '@/util/index.js'
export default {
    name: "recommendTime",
    data(){
        return{
            myChart:{},
            list:[
                {"name":'自己',"color":"#01C291"},
                {"name":'团队',"color":"#FE4C4B"},
                {"name":'明星',"color":"#FE9A02"},
                {"name":'公司',"color":"#2982FF"},
            ],
            myChartStyle: {
                float: "center",
                width: "690rpx",
                height: "600rpx",
                // paddingTop: "20rpx",
                // margin: "20px",
            }, //图表样式
            sexData: [
            ],
        }
    },
    created() {
        this.getInit();
    },
    methods:{
        getInit() {
            getMemberRecommend().then((res)=>{
                this.ageChart(res.data);
            })
        },
        ageChart(data) {
            let _that = this;
            let list1=[]
            list1.push({'value':data.companyTime})
            list1.push({'value':data.starTime})
            list1.push({'value':data.teamTime})
            list1.push({'value':data.thisTime})
            let _data = this.initCharts(list1);
            let _maxTime = _data[0].value;
            let _unit = '秒';
            let _unitInfo = 60;
            if(_maxTime > 60){
                _unit = '分';
            }
            if(_maxTime > 60 * 60){
                _unit = '时';
                _unitInfo = 60*60;
            }
            if(_maxTime > 60 * 60 * 24){
                _unit = '天';
                _unitInfo = 60*60*24;
            }
            list1.forEach(function(item){
               item["subValue"] = parseFloat(item.value) / _unitInfo;
            });
            var option = {
                tooltip: {
                    formatter: function(data){
                        data.value= formatSeconds( data.value)
                        return data.value
                    },
                },
                legend: {
                    // left: "right",
                    top: "70px",
                    right: "0px",

                    orient: 'vertical',
                    itemHeight:10,
                    itemWidth:20
                },
                color: "rgb(71,137,246)",
                grid: {
                    left: '0%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
					axisLabel: {
						textStyle: {
						  fontSize: "10",
						},
					  },
                    type: 'value',
                    minInterval: 1,
                    axisLine:{
                        show:true
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {

                        formatter:function(data){
                           let _data =formatSeconds(data)
                            return _data;
                        },
                    }
                    // axisLabel:{
                    //     formatter: function(data){
                    //         var text=data;
                    //         console.error(text)
                    //         return text+'天'
                    //     },
                    //     itemWidth: "40"
                    // }
                },
                yAxis: {
                    type: 'category',
                    show:false,
                    width: 10,
                    axisLabel: {
                      textStyle: {
                        fontSize: "10",
                      },
                  },
                },
                series: {
                    type: 'bar',
                    color:'#FE9A02',
                    data: list1,
                    label: {
                        show: true,
                        position:'right',
                        textStyle:{
                            color:"#333",
                            fontSize:10
                        },
                        formatter: function(data){
                            data.value= formatSeconds( data.value)
                            return data.value
                        }
                    },
                    itemStyle: {
                        normal: {
                            //这里是颜色
                            color: function(params) {
                                var colorList = ['#2982FF','#FE9A02', '#FE4C4B', '#01C291'];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    barWidth:'30'
                },
            };
            const myChart = echarts.init(document.getElementById("mycharts"));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
        initCharts(data){
            data.sort(function(a,b){
                return b.value - a.value;
            });
            return data;
        }
    }
}
</script>

<style scoped lang="scss">
	.width-auto{
	  //width: 100%;
		position: relative;
		height:950rpx;
		background-color: #fff;
		  width: 690rpx;

			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;
	}
.right-lines{
    position: absolute;
    display: flex;
text-align: center;
  justify-content: center;
  width: 100%;
    bottom:30rpx;
    color: #999;
    font-size: 12px;
	//display: flex;
}
.item-s{
    padding-bottom: 10px;
    display: flex;
    line-height: 30rpx;
	height: 30rpx;
}
.bg-color{
    width: 60rpx;
    height: 30rpx;
    border-radius: 2px;
   margin: 0 10rpx;
}
</style>