198 lines
4.1 KiB
Vue
198 lines
4.1 KiB
Vue
<template>
|
|
<div class="width-auto">
|
|
<view class="title">
|
|
{{'奖衔业绩分布'}}
|
|
<!-- 奖衔业绩分布 -->
|
|
</view>
|
|
<div class="flex-s">
|
|
<div
|
|
id="main2"
|
|
style="width: 690rpx;height: 600rpx;"
|
|
:style="myChartStyle"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import * as echarts from "echarts";
|
|
import { azAchievement, getPerformance } from "@/config/distribute.js";
|
|
export default {
|
|
name: "recommendTime",
|
|
data() {
|
|
return {
|
|
texts: "",
|
|
pieData: [
|
|
|
|
{
|
|
value: 0,
|
|
age: 0,
|
|
name: '左区',
|
|
itemStyle: { color: "#EE5858" },
|
|
},
|
|
{
|
|
value: 0,
|
|
age: 0,
|
|
name: '右区',
|
|
itemStyle: { color: "#FBB046" },
|
|
},
|
|
],
|
|
myChartStyle: {
|
|
float: "center",
|
|
width: "690rpx",
|
|
height: "750rpx",
|
|
paddingTop: "0",
|
|
// margin: "20px",
|
|
}, //图表样式
|
|
};
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
created() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
getData() {
|
|
azAchievement().then((res) => {
|
|
this.pieData[1].value = res.data.rightAchieve;
|
|
this.pieData[0].value = res.data.leftAchieve;
|
|
this.pieData[1].age = res.data.rightPeopleNumber;
|
|
this.pieData[0].age = res.data.leftPeopleNumber;
|
|
setTimeout(() => {
|
|
this.ageChart(res.data);
|
|
}, 50);
|
|
});
|
|
},
|
|
ageChart(datas) {
|
|
var myChart = echarts.init(document.getElementById("main2"));
|
|
let that =this
|
|
var option = {
|
|
legend: {
|
|
// 图例
|
|
// right: "0%",
|
|
left: '33%',
|
|
bottom: "0",
|
|
color: "#999",
|
|
// orient: "vertical",
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
label: {
|
|
show: true,
|
|
// formatter:'{b}: {c}人\n 业绩: {d}万',
|
|
formatter: function (data) {
|
|
return (
|
|
data.data.name +
|
|
":" +
|
|
data.data.age +
|
|
that.$t('w_0337') +
|
|
"\n " +
|
|
that.$t('ENU_TOTAL_V_1') + ':' +
|
|
data.data.value +
|
|
that.$t('S_C_58')
|
|
);
|
|
},
|
|
|
|
|
|
normal: {
|
|
borderWidth:2,
|
|
formatter: function (data) {
|
|
return (
|
|
data.data.name +
|
|
":" +
|
|
data.data.age +
|
|
that.$t('w_0337') +
|
|
"\n" +
|
|
"\n" +
|
|
that.$t('ENU_TOTAL_V_1') + ':' +
|
|
data.data.value +
|
|
that.$t('S_C_58')
|
|
);
|
|
},
|
|
color: "#fff",
|
|
position:'inside' //默认自适应，水平布局为'top'，垂直布局为'right'，可选为 'inside'|'left'|'right'|'top'|'bottom'
|
|
}
|
|
},
|
|
radius: "70%", //饼图半径
|
|
data: this.pieData,
|
|
avoidLabelOverlap: false,
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
},
|
|
},
|
|
};
|
|
</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;
|
|
}
|
|
::v-deep .el-select .el-input .el-select__caret {
|
|
color: #333;
|
|
}
|
|
.lines {
|
|
width: 2px;
|
|
height: 470px;
|
|
opacity: 1;
|
|
background: #979797;
|
|
position: absolute;
|
|
bottom: 50px;
|
|
left: 50%;
|
|
margin-left: -110px;
|
|
}
|
|
.right-lines {
|
|
position: absolute;
|
|
right: 80px;
|
|
top: 140px;
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
.item-s {
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
line-height: 24px;
|
|
}
|
|
.bg-color {
|
|
width: 40px;
|
|
height: 22px;
|
|
border-radius: 2px;
|
|
margin-left: 5px;
|
|
}
|
|
.flex-s {
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
// width: 700px;
|
|
}
|
|
.styles {
|
|
position: absolute;
|
|
right: -30px;
|
|
z-index: 111;
|
|
top: 60px;
|
|
/*background: rgba(0,0,0,0.05);*/
|
|
/*border-radius: 4px 4px 4px 4px;*/
|
|
}
|
|
::v-deep .el-select .el-input__inner {
|
|
border: none;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
</style> |