227 lines
6.6 KiB
Vue
227 lines
6.6 KiB
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> |