forked from angelo/web-retail-h5
205 lines
3.9 KiB
Vue
205 lines
3.9 KiB
Vue
|
|
<template>
|
|
<div class="width-auto">
|
|
<view class="title">
|
|
{{'新增业绩'}}
|
|
</view>
|
|
<div class="flex-s">
|
|
<div
|
|
id="firstPv"
|
|
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{
|
|
myChartStyle: {
|
|
float: "center",
|
|
width: "690rpx",
|
|
height: "750rpx",
|
|
paddingTop: "0",
|
|
// margin: "20px",
|
|
}, //
|
|
}
|
|
},
|
|
mounted() {
|
|
this.upDateCover()
|
|
},
|
|
methods: {
|
|
upDateCover() {
|
|
api.achieveDay().then((res) => {
|
|
let arr1 = res.data.map((item) => {
|
|
return item.settleDate
|
|
})
|
|
let arr2 = res.data.map((item) => {
|
|
return item.aNewPv
|
|
})
|
|
let arr3 = res.data.map((item) => {
|
|
return item.bNewPv
|
|
})
|
|
setTimeout(() => {
|
|
this.drawChart(arr1, arr2, arr3)
|
|
}, 50);
|
|
|
|
})
|
|
},
|
|
drawChart(arr1, arr2, arr3) {
|
|
var myChart = echarts.init(document.getElementById("firstPv"));
|
|
// 指定图表的配置项和数据
|
|
let option = {
|
|
title: {
|
|
text: '',
|
|
subtext: '业绩(万)',
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
top: 'bottom',
|
|
data: ['左区', '右区'],
|
|
itemWidth: 20, // 长方形宽度
|
|
itemHeight: 10, // 长方形高度
|
|
},
|
|
xAxis: {
|
|
data: arr1,
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 45,
|
|
textStyle: {
|
|
color: '#000',
|
|
fontSize: '8',
|
|
itemSize: '',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '左区',
|
|
type: 'line',
|
|
data: arr2,
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#5A64FF',
|
|
},
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
width: 3,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '右区',
|
|
type: 'line',
|
|
data: arr3,
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#01C4FF',
|
|
},
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
width: 3,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
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>
|