forked from angelo/web-retail-h5
291 lines
6.5 KiB
Vue
291 lines
6.5 KiB
Vue
|
||
<template>
|
||
<div class="width-auto">
|
||
<view class="titleF">
|
||
<view class="title">
|
||
{{$t('N_I_105')}}
|
||
</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>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
|
||
import * as api from '@/config/activity.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
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()
|
||
}, 50)
|
||
},
|
||
getDayType() {
|
||
api.getDayType().then((res) => {
|
||
this.dateTypeList = res.data
|
||
this.dataName = res.data[0].label
|
||
})
|
||
},
|
||
upDateCover() {
|
||
api
|
||
.getActiveMember({
|
||
dateType: this.dateType,
|
||
})
|
||
.then((res) => {
|
||
let arr1 = res.data.map((item) => {
|
||
return item.creationTime;
|
||
});
|
||
let arr2 = res.data.map((item) => {
|
||
return item.leftCoun;
|
||
});
|
||
let arr3 = res.data.map((item) => {
|
||
return item.rightCount;
|
||
});
|
||
this.drawChart(arr1, arr2, arr3);
|
||
});
|
||
},
|
||
drawChart(arr1, arr2, arr3) {
|
||
// 基于准备好的dom,初始化echarts实例 这个和上面的main对应
|
||
var myChart = echarts.init(document.getElementById("mounthData2"));
|
||
// 指定图表的配置项和数据
|
||
let option = {
|
||
title: {
|
||
text: "",
|
||
subtext: this.$t('N_I_106'),
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
top: "bottom",
|
||
bottom: '5%',
|
||
data: [this.$t('S_C_18'), this.$t('S_C_19')],
|
||
},
|
||
xAxis: {
|
||
data: arr1,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
// rotate: 45,
|
||
textStyle: {
|
||
color: "#000",
|
||
fontSize: "10",
|
||
itemSize: "",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: this.$t('S_C_18'),
|
||
type: "bar",
|
||
data: arr2,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: [4, 4, 0, 0],
|
||
color: "#34b934",
|
||
},
|
||
},
|
||
barWidth: "18px",
|
||
},
|
||
{
|
||
name: this.$t('S_C_19'),
|
||
type: "bar",
|
||
data: arr3,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: [4, 4, 0, 0],
|
||
color: "#FFAE36",
|
||
},
|
||
},
|
||
barWidth: "18px",
|
||
},
|
||
],
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
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: 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;
|
||
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> |