178 lines
3.6 KiB
Vue
178 lines
3.6 KiB
Vue
<template>
|
|
<div class="width-auto">
|
|
<view class="title">
|
|
{{'复购业绩分布'}}
|
|
</view>
|
|
<div class="flex-s">
|
|
<div
|
|
id="main11"
|
|
style="width: 690rpx;height: 600rpx;"
|
|
:style="myChartStyle"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import * as api from '@/config/activity.js'
|
|
export default {
|
|
name: 'recommendTime',
|
|
data() {
|
|
return {
|
|
texts: '',
|
|
pieData: [
|
|
|
|
{
|
|
value: 0,
|
|
age: 0,
|
|
name: '左区',
|
|
itemStyle: { color: '#01c291' },
|
|
},
|
|
{
|
|
value: 0,
|
|
age: 0,
|
|
name: '右区',
|
|
itemStyle: { color: '#2982ff' },
|
|
},
|
|
],
|
|
myChartStyle: {
|
|
float: "center",
|
|
width: "690rpx",
|
|
height: "750rpx",
|
|
paddingTop: "0",
|
|
// margin: "20px",
|
|
}, //图表样式
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
api.secondPv().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) {
|
|
let that =this
|
|
var myChart = echarts.init(document.getElementById('main11'))
|
|
var option = {
|
|
legend: {
|
|
// 图例
|
|
// right: "0%",
|
|
left: '33%',
|
|
bottom: '0',
|
|
color: '#999',
|
|
// orient: "vertical",
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
label: {
|
|
show: true,
|
|
formatter: function (data) {
|
|
console.error(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')
|
|
)
|
|
},
|
|
lineHeight: 20, // 行高
|
|
color: '#fff',
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
position:'inside'
|
|
},
|
|
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> |