283 lines
7.0 KiB
Vue
283 lines
7.0 KiB
Vue
|
||
<template>
|
||
<div class="width-auto">
|
||
<view class="titleF">
|
||
<view class="title">
|
||
{{'月度新增业绩对比'}}
|
||
</view>
|
||
<picker :range="selMounthList" :value="index" range-key="label" @change="bindPickerChange">
|
||
<view class="mClass">
|
||
<view>{{whatMounth}}月</view>
|
||
<u-icon name="arrow-down" color="#999"></u-icon>
|
||
</view>
|
||
|
||
</picker>
|
||
|
||
</view>
|
||
<div class="flex-s">
|
||
<div id="mounthData" 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 {
|
||
index: 0,
|
||
myChartStyle: {
|
||
float: "center",
|
||
width: "690rpx",
|
||
height: "750rpx",
|
||
paddingTop: "0",
|
||
},
|
||
selMounthList: [{
|
||
value: 1,
|
||
label: '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.getMounth()
|
||
this.upDateCover()
|
||
// this.drawChart()
|
||
},
|
||
methods: {
|
||
bindPickerChange(e) {
|
||
this.whatMounth = e.detail.value + 1
|
||
setTimeout(() => {
|
||
this.upDateCover()
|
||
}, 50)
|
||
},
|
||
// 获取当前月
|
||
getMounth() {
|
||
this.whatMounth = new Date().getMonth() + 1
|
||
let selMounth = []
|
||
this.mounthList.forEach((item) => {
|
||
if (item.value <= this.whatMounth) {
|
||
selMounth.push(item)
|
||
}
|
||
})
|
||
this.selMounthList = selMounth
|
||
},
|
||
upDateCover() {
|
||
api
|
||
.achieveContrast({
|
||
monthType: this.whatMounth || this.time
|
||
})
|
||
.then((res) => {
|
||
let arr1 = res.data.map((item) => {
|
||
return item.date
|
||
})
|
||
let arr2 = res.data.map((item) => {
|
||
return item.aNewPv
|
||
})
|
||
let arr3 = res.data.map((item) => {
|
||
return item.bNewPv
|
||
})
|
||
this.drawChart(arr1, arr2, arr3)
|
||
})
|
||
},
|
||
drawChart(arr1, arr2, arr3) {
|
||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
|
||
var myChart = echarts.init(document.getElementById("mounthData"));
|
||
// 指定图表的配置项和数据
|
||
let option = {
|
||
title: {
|
||
text: '',
|
||
subtext: '业绩(万)',
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
top: 'bottom',
|
||
bottom: '5%',
|
||
data: ['左区', '右区'],
|
||
},
|
||
xAxis: {
|
||
data: arr1,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: {
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
},
|
||
},
|
||
},
|
||
series: [{
|
||
name: '左区',
|
||
type: 'bar',
|
||
data: arr2,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: [10, 10, 0, 0],
|
||
color: '#FE4C4B',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: '右区',
|
||
type: 'bar',
|
||
data: arr3,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: [10, 10, 0, 0],
|
||
color: '#FFAE36',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
}
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
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> |