forked from angelo/web-retail-h5
378 lines
8.9 KiB
Vue
378 lines
8.9 KiB
Vue
<template>
|
||
<div class="width-auto">
|
||
<div class="title">
|
||
<div>{{'推荐业绩分布'}}</div>
|
||
<div style="color: #999;font-size: 14px;margin: 0px 0 0 14px">{{'本人及伞下前十'}}</div>
|
||
</div>
|
||
<div class="color-s">
|
||
<div id="mounthData4" :style="myChartStyle">
|
||
</div>
|
||
</div>
|
||
<view class="flex-s">
|
||
<div class="item-s" v-for="item in gradeList">
|
||
<div>
|
||
<div class="bg-color" :style="{background:`${item.color}`}"></div>
|
||
<div style="color: #333;text-align: center;">{{item.gradeName}}</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as api from '@/config/distribute.js'
|
||
import {
|
||
parentAchieveLeft,
|
||
systemGrandeRange
|
||
} from "@/config/distribute.js";
|
||
import * as echarts from "echarts";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
arr: [],
|
||
barList: {},
|
||
gradeList: [],
|
||
dataLists: {},
|
||
myChartStyle: {
|
||
width: "690rpx",
|
||
height: "1000rpx",
|
||
margin: "10rpx 0 10rpx 20rpx",
|
||
}, //图表样式
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
created() {
|
||
this.systemGrandeRange()
|
||
this.upDateCover2()
|
||
},
|
||
methods: {
|
||
systemGrandeRange() {
|
||
// 所有等级名称
|
||
systemGrandeRange().then((res) => {
|
||
this.gradeList = res.data
|
||
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
|
||
})
|
||
},
|
||
initArrData(_data) {
|
||
let _barList = {};
|
||
let _barList1 = {};
|
||
let arr = this.arr;
|
||
this.systemGrandeRange();
|
||
_data.forEach((item) => {
|
||
if (item.umbrellaList.length > 0) {
|
||
let lists = this.sortBy(item.umbrellaList, "gradeValue")
|
||
this.barList.id.forEach((_item, index) => {
|
||
lists.forEach((items) => {
|
||
if (_item == items.pkGrade) {
|
||
_barList[_item] = this.barList.name[index];
|
||
_barList1[_item] = this.barList.color[index];
|
||
}
|
||
})
|
||
});
|
||
} else if (item.umbrellaList.length == 0) {
|
||
this.barList.id.forEach((_item, index) => {
|
||
_barList[_item] = this.barList.name[index];
|
||
_barList1[_item] = this.barList.color[index];
|
||
});
|
||
}
|
||
});
|
||
let _list = {
|
||
id: [],
|
||
name: [],
|
||
color: []
|
||
};
|
||
for (let key in _barList) {
|
||
_list.id.push(key);
|
||
_list.name.push(_barList[key]);
|
||
}
|
||
for (let key in _barList1) {
|
||
_list.color.push(_barList1[key])
|
||
}
|
||
|
||
this.barList = _list;
|
||
let _arrList = {};
|
||
this.barList.id.forEach((item) => {
|
||
let _arrs = [];
|
||
for (let i = 0; i < _data.length; i++) {
|
||
_arrs.push(0);
|
||
}
|
||
_arrList[item] = _arrs;
|
||
});
|
||
return this.initServiceData(_data, _arrList);
|
||
},
|
||
initServiceData(_data, _arrList) {
|
||
//初始化data值
|
||
_data.forEach((item, index) => {
|
||
if (item.umbrellaList != undefined) {
|
||
item.umbrellaList.forEach((items) => {
|
||
if (_arrList[items.pkGrade] != undefined) {
|
||
_arrList[items.pkGrade][index] = items.achieve;
|
||
}
|
||
})
|
||
}
|
||
});
|
||
return _arrList;
|
||
},
|
||
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(); // 日
|
||
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 + " "
|
||
},
|
||
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) {
|
||
console.error(val)
|
||
api
|
||
.parentAchieveLeft({
|
||
month: val ? val.startDate : this.getStartTime()
|
||
// startDate:val? val.startDate :this.getStartTime(),
|
||
// endDate: val?val.endDate:this.getEndTime(),
|
||
// endDate: val?val[1]:'2023-06-29',
|
||
// startDate:val? val[0] :'2023-06-01',
|
||
})
|
||
.then((res) => {
|
||
let xAxisData = []
|
||
//初始化services数组
|
||
let _arrList = this.initArrData(res.data);
|
||
//初始化data值
|
||
res.data.forEach((item, index) => {
|
||
xAxisData.push(item.memberName)
|
||
})
|
||
let _series = [];
|
||
this.barList.name.forEach((item, index) => {
|
||
let _service = {
|
||
name: item,
|
||
showSymbol: false,
|
||
type: 'bar',
|
||
stack: 'one',
|
||
color: this.barList.color[index],
|
||
data: _arrList[this.barList.id[index]]
|
||
};
|
||
_series.push(_service);
|
||
});
|
||
this.$nextTick(() => { //结合$nextTick使用
|
||
this.drawChart(xAxisData, _series);
|
||
})
|
||
})
|
||
},
|
||
drawChart(arr1, series) {
|
||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
|
||
let myChart = echarts.init(document.getElementById('mounthData4'))
|
||
// 指定图表的配置项和数据
|
||
let option = {
|
||
// legend: {
|
||
// data: this.barList.name,
|
||
// left: '10%',
|
||
//
|
||
// },
|
||
|
||
|
||
|
||
tooltip: {},
|
||
textStyle: {
|
||
fontSize: 10,
|
||
},
|
||
xAxis: {
|
||
data: arr1,
|
||
bottom: 10,
|
||
axisLabel: {
|
||
formatter: function(params) {
|
||
var newParamsName = ''; // 拼接后的新字符串
|
||
var paramsNameNumber = params.length; // 实际标签数
|
||
var provideNumber = 2; // 每行显示的字数
|
||
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 如需换回，算出要显示的行数
|
||
|
||
if (paramsNameNumber > provideNumber) {
|
||
/** 循环每一行,p表示行 */
|
||
|
||
for (var i = 0; i < rowNumber; i++) {
|
||
var tempStr = ''; // 每次截取的字符串
|
||
var start = i * provideNumber; // 截取位置开始
|
||
var end = start + provideNumber; // 截取位置结束
|
||
|
||
// 最后一行的需要单独处理
|
||
|
||
if (i == rowNumber - 1) {
|
||
tempStr = params.substring(start, paramsNameNumber);
|
||
} else {
|
||
tempStr = params.substring(start, end) + '\n';
|
||
}
|
||
newParamsName += tempStr;
|
||
}
|
||
} else {
|
||
newParamsName = params;
|
||
}
|
||
|
||
return newParamsName;
|
||
},
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: 8,
|
||
},
|
||
axisLabel: {
|
||
// 轴文字
|
||
show: false,
|
||
color: "#A0B2D3",
|
||
fontSize: 8,
|
||
},
|
||
}
|
||
},
|
||
// xAxis: {
|
||
// data: arr1,
|
||
// bottom:10,
|
||
// axisLabel: {
|
||
// interval: 0,
|
||
// margin:10,
|
||
// textStyle:{
|
||
// fontSize:10,
|
||
// },
|
||
// formatter:function(value,index)
|
||
// {
|
||
// return value;
|
||
// }
|
||
// },
|
||
// },
|
||
yAxis: {
|
||
axisLabel: {
|
||
// 轴文字
|
||
show: true,
|
||
fontSize: 8,
|
||
},
|
||
},
|
||
grid: {
|
||
bottom: 100,
|
||
left: '15%', // 调整y轴字体显示不完整，原来值是
|
||
},
|
||
series: series
|
||
}
|
||
|
||
// myChart.clear();
|
||
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;
|
||
}
|
||
|
||
.bg-color {
|
||
width: 40px;
|
||
height: 20px;
|
||
border-radius: 4px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.flex-s {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
//align-items: center;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
position: absolute;
|
||
//justify-content: center;
|
||
bottom: 10rpx;
|
||
// height: 80rpx;
|
||
// line-height: 80rpx;
|
||
}
|
||
|
||
.width-auto {
|
||
position: relative;
|
||
height: 1400rpx;
|
||
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;
|
||
display: flex;
|
||
}
|
||
|
||
.color-s {
|
||
// width: 790px;
|
||
// height: 646px;
|
||
// border: 4px solid #979797;
|
||
// margin: 80px;
|
||
// position: absolute;
|
||
// left: 0px;
|
||
// top: 10px;
|
||
}
|
||
|
||
.title1 {
|
||
position: absolute;
|
||
left: 80px;
|
||
top: 40px;
|
||
display: flex;
|
||
color: #333333;
|
||
font-size: 20px;
|
||
|
||
div {}
|
||
}
|
||
</style>
|