forked from angelo/web-retail-h5
176 lines
4.1 KiB
Vue
176 lines
4.1 KiB
Vue
<template>
|
|
<div class="width-auto">
|
|
<view class="title">
|
|
{{'真实业绩分布'}}
|
|
</view>
|
|
<div class="flex-s">
|
|
<div id="main22" style="width: 690rpx;height: 600rpx;" :style="myChartStyle"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import { realPerformancePic } 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",
|
|
}, //图表样式
|
|
}
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods:{
|
|
getData() {
|
|
realPerformancePic().then((res)=>{
|
|
this.pieData[1].value = res.data.rightAchievement
|
|
this.pieData[0].value = res.data.leftAchievement
|
|
this.pieData[1].age = res.data.rightNumber
|
|
this.pieData[0].age = res.data.leftNumber
|
|
setTimeout(()=>{
|
|
this.ageChart(res.data);
|
|
},50)
|
|
})
|
|
},
|
|
ageChart(datas) {
|
|
let that =this
|
|
var myChart = echarts.init(document.getElementById('main22'));
|
|
var option = {
|
|
legend: {
|
|
// 图例
|
|
// right: "0%",
|
|
left: '33%',
|
|
bottom: '0',
|
|
color: '#999',
|
|
// orient: "vertical",
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
label: {
|
|
show: true,
|
|
lineHeight:16,// 行高
|
|
|
|
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: that.pieData
|
|
},
|
|
]
|
|
}
|
|
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> |