forked from angelo/web-retail-h5
358 lines
7.8 KiB
Vue
358 lines
7.8 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 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":this.$t('S_C_73'),"color":"#FF5151"},
|
|||
|
|
{"name":this.$t('S_C_74'),"color":"#BB0909"},
|
|||
|
|
{"name":this.$t('S_C_75'),"color":"#FFAE36"},
|
|||
|
|
{"name":this.$t('S_C_76'),"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: this.$t('S_C_72'),
|
|||
|
|
},
|
|||
|
|
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>
|