358 lines
7.8 KiB
Vue
358 lines
7.8 KiB
Vue
|
||
<template>
|
||
<div class="width-auto">
|
||
<view class="titleF">
|
||
<view class="title">
|
||
<!-- {{'活跃会员对比'}} -->
|
||
</view>
|
||
<picker :range="dateTypeList"
|
||
:value="index"
|
||
range-key="label"
|
||
@change="bindPickerChange">
|
||
<view class="mClass">
|
||
<view>{{dataName}}</view>
|
||
<u-icon name="arrow-down"
|
||
color="#999"></u-icon>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<div class="flex-s">
|
||
<div id="mounthData2"
|
||
style="width: 700rpx;height: 600rpx;"
|
||
:style="myChartStyle"></div>
|
||
</div>
|
||
<div class="right-lines">
|
||
<div class="item-s" v-for="item in list">
|
||
|
||
<div class="bg-color" :style="{backgroundColor:`${item.color}`}"></div>
|
||
<div>{{item.name}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
|
||
import * as api from '@/config/activity.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
list:[{"name":'左区首购',"color":"#FF5151"},
|
||
{"name":'左区复购',"color":"#BB0909"},
|
||
{"name":'右区首购',"color":"#FFAE36"},
|
||
{"name":'右区复购',"color":"#935801"}
|
||
],
|
||
dataName: '',
|
||
index: 0,
|
||
myChartStyle: {
|
||
float: 'center',
|
||
width: '690rpx',
|
||
height: '750rpx',
|
||
paddingTop: '0',
|
||
},
|
||
dateTypeList: [],
|
||
dateType: 1,
|
||
whatMounth: '',
|
||
mounthList: [
|
||
{
|
||
value: 1,
|
||
label: '1月',
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '2月',
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '3月',
|
||
},
|
||
{
|
||
value: 4,
|
||
label: '4月',
|
||
},
|
||
{
|
||
value: 5,
|
||
label: '5月',
|
||
},
|
||
{
|
||
value: 6,
|
||
label: '6月',
|
||
},
|
||
{
|
||
value: 7,
|
||
label: '7月',
|
||
},
|
||
{
|
||
value: 8,
|
||
label: '8月',
|
||
},
|
||
{
|
||
value: 9,
|
||
label: '9月',
|
||
},
|
||
{
|
||
value: 10,
|
||
label: '10月',
|
||
},
|
||
{
|
||
value: 11,
|
||
label: '11月',
|
||
},
|
||
{
|
||
value: 12,
|
||
label: '12月',
|
||
},
|
||
],
|
||
// margin: "20px",
|
||
//
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getDayType()
|
||
// this.upDateCover()
|
||
// this.drawChart()
|
||
},
|
||
methods: {
|
||
bindPickerChange(e) {
|
||
this.dateType = e.detail.value + 1
|
||
this.dateTypeList.forEach((item) => {
|
||
if (this.dateType == item.value) {
|
||
this.dataName = item.label
|
||
}
|
||
})
|
||
setTimeout(() => {
|
||
this.upDateCover(this.dateType)
|
||
}, 50)
|
||
},
|
||
getDayType() {
|
||
api.getDayType().then((res) => {
|
||
this.dateTypeList = res.data
|
||
this.dataName = res.data[0].label
|
||
this.upDateCover(res.data[0].value)
|
||
})
|
||
},
|
||
upDateCover(value) {
|
||
api.getIndexAddAchieve({"dayType": value}).then((res) => {
|
||
let time = []
|
||
let arr1 = []
|
||
let arr2 = []
|
||
let arr3 = []
|
||
let arr4 = []
|
||
res.data.forEach((item) => {
|
||
if (item.settleDate) {
|
||
time.push(item.settleDate)
|
||
}
|
||
arr1.push(item.repANewPv)
|
||
arr2.push(item.repBNewPv)
|
||
arr3.push(item.bNewPv)
|
||
arr4.push(item.aNewPv)
|
||
})
|
||
this.drawChart(arr1, arr2, arr3, arr4, time)
|
||
})
|
||
},
|
||
drawChart(arr1, arr2, arr3, arr4, time) {
|
||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
|
||
var myChart = echarts.init(document.getElementById('mounthData2'))
|
||
// 指定图表的配置项和数据
|
||
let option = {
|
||
title: {
|
||
text: '',
|
||
subtext: '业绩（万）',
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
top: 'bottom',
|
||
bottom: '5%',
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: time,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#333',
|
||
width: '1', // 坐标轴线线宽
|
||
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: true, // 是否显示坐标轴刻度
|
||
inside: true, // 坐标轴刻度是否朝内，默认朝外
|
||
length: 5, // 坐标轴刻度的长度
|
||
lineStyle: {
|
||
color: '#FFF', // 刻度线的颜色
|
||
width: 10, // 坐标轴刻度线宽
|
||
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
type: 'category',
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#000',
|
||
fontSize: '10',
|
||
itemSize: '',
|
||
},
|
||
formatter: function (data) {
|
||
return data
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#CCCCCC',
|
||
type: 'dashed', //虚线
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: arr4,
|
||
type: 'line',
|
||
color: '#FF5151',
|
||
label: {
|
||
show: false,
|
||
position: 'right',
|
||
},
|
||
formatter: function (data) {
|
||
console.error(data)
|
||
},
|
||
},
|
||
{
|
||
data: arr1,
|
||
type: 'line',
|
||
color: '#BB0909',
|
||
label: {
|
||
show: false,
|
||
position: 'right',
|
||
},
|
||
},
|
||
{
|
||
data: arr3,
|
||
type: 'line',
|
||
color: '#FE9A02',
|
||
label: {
|
||
show: false,
|
||
position: 'right',
|
||
},
|
||
},
|
||
{
|
||
data: arr2,
|
||
type: 'line',
|
||
color: '#935801',
|
||
label: {
|
||
show: false,
|
||
position: 'right',
|
||
},
|
||
},
|
||
],
|
||
}
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
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 {
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
|
||
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: 10px;
|
||
display: flex;
|
||
justify-content: center; /* 水平居中 */
|
||
align-items: center; /* 垂直居中 */
|
||
// width: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.item-s {
|
||
// padding-bottom: 10px;
|
||
display: flex;
|
||
// line-height: 24px;
|
||
align-items: center;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.bg-color {
|
||
width: 20px;
|
||
height: 10px;
|
||
border-radius: 2px;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.flex-s {
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// width: 700px;
|
||
// padding: 0 20rpx;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
.titleF {
|
||
display: flex;
|
||
border-bottom: 10rpx solid #f3f3f3;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
.mClass {
|
||
display: flex;
|
||
}
|
||
</style> |