376 lines
9.5 KiB
Vue
376 lines
9.5 KiB
Vue
<template>
|
|
<div>
|
|
<container3 title="利润概况">
|
|
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
|
<div style="height:100%;width:100%;" ref="chart"></div>
|
|
</container3>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import scalseBox from '../components/scaleBox.vue'
|
|
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
|
import rocketTit from "../components/rocketTit/index.vue";
|
|
import container3 from "./components/container3/index.vue";
|
|
|
|
|
|
import echarts from 'echarts'
|
|
require('echarts/theme/macarons') // echarts theme
|
|
import resize from '../../dashboard/mixins/resize'
|
|
|
|
import request from '@/utils/request'
|
|
export default {
|
|
mixins: [resize],
|
|
name: 'left2',
|
|
components: {
|
|
scalseBox,
|
|
bigScreenHead,
|
|
rocketTit,
|
|
container3,
|
|
},
|
|
data () {
|
|
return {
|
|
dateRange: [],
|
|
chart: null,
|
|
option: {
|
|
legend: {
|
|
data: ['利润', '利润预测', '利润目标完成率'],
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '6%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: [
|
|
'2021-01',
|
|
'2021-02',
|
|
'2021-03',
|
|
'2021-04',
|
|
'2021-05',
|
|
'2021-06',
|
|
'2021-07',
|
|
'2021-08',
|
|
'2021-09',
|
|
'2021-10',
|
|
'2021-11',
|
|
'2021-12',
|
|
],
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)'
|
|
},
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '万元',
|
|
min: 0,
|
|
max: 250,
|
|
interval: 50,
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
},
|
|
splitLine: {
|
|
show: false//不显示网格线
|
|
},
|
|
splitArea: {
|
|
show: false//不显示网格区域
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)'
|
|
},
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
min: 0,
|
|
max: 50,
|
|
interval: 5,
|
|
axisLabel: {
|
|
formatter: '{value} %'
|
|
},
|
|
splitLine: {
|
|
show: false//不显示网格线
|
|
},
|
|
splitArea: {
|
|
show: false//不显示网格区域
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)'
|
|
},
|
|
}
|
|
}
|
|
],
|
|
grid: {
|
|
containLabel: true,
|
|
width: "99%",
|
|
left: 0,
|
|
top: 50,
|
|
bottom: 50,
|
|
},
|
|
dataZoom: {},
|
|
series: [
|
|
{
|
|
name: '利润',
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
data: [
|
|
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
|
],
|
|
itemStyle: {
|
|
color: 'rgb(118,196,166)'
|
|
},
|
|
barGap: '0'
|
|
},
|
|
{
|
|
name: '利润预测',
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
data: [
|
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
|
],
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear', // 线性渐变
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#B5D3FE' // 0%处的颜色为红色
|
|
}, {
|
|
offset: 1,
|
|
color: '#7EA7FC' // 100%处的颜色为蓝
|
|
}]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '利润目标完成率',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
smooth: false,
|
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
|
itemStyle: {
|
|
color: 'rgba(85, 197, 162, 1)'
|
|
},
|
|
yAxisIndex: 1,
|
|
symbol: 'none'
|
|
}
|
|
],
|
|
},
|
|
}
|
|
},
|
|
mounted () {
|
|
this.$nextTick(() => {
|
|
this.initChart()
|
|
})
|
|
},
|
|
beforeDestroy () {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
initChart () {
|
|
request({
|
|
url: '/hx/cockpitOverview/profitProfile',
|
|
method: 'get',
|
|
}).then(res => {
|
|
|
|
this.chart = echarts.init(this.$refs.chart)
|
|
let titData = [];
|
|
let COMPLETEDPROFIT = [];
|
|
let FORECASTPROFIT = [];
|
|
let TARGETPROFIT = [];
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
const item = res.data[i];
|
|
titData.push(item.month);
|
|
COMPLETEDPROFIT.push(item.COMPLETEDPROFIT);
|
|
FORECASTPROFIT.push(item.FORECASTPROFIT);
|
|
TARGETPROFIT.push(item.COMPLETEDPROFIT / item.TARGETPROFIT * 100);
|
|
}
|
|
this.chart.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['利润', '利润预测', '利润目标完成率'],
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
// data: [
|
|
// '2021-01',
|
|
// '2021-02',
|
|
// '2021-03',
|
|
// '2021-04',
|
|
// '2021-05',
|
|
// '2021-06',
|
|
// '2021-07',
|
|
// '2021-08',
|
|
// '2021-09',
|
|
// '2021-10',
|
|
// '2021-11',
|
|
// '2021-12',
|
|
// ],
|
|
data: titData,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)'
|
|
},
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '万元',
|
|
min: 0,
|
|
max: 250,
|
|
interval: 50,
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
},
|
|
splitLine: {
|
|
show: false//不显示网格线
|
|
},
|
|
splitArea: {
|
|
show: false//不显示网格区域
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)'
|
|
},
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value} %'
|
|
},
|
|
splitLine: {
|
|
show: false//不显示网格线
|
|
},
|
|
splitArea: {
|
|
show: false//不显示网格区域
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgb(255, 255, 255)'
|
|
},
|
|
}
|
|
}
|
|
],
|
|
grid: {
|
|
containLabel: true,
|
|
width: "99%",
|
|
left: 0,
|
|
top: 50,
|
|
bottom: 50,
|
|
},
|
|
dataZoom: {
|
|
type: 'slider',
|
|
start: 0,
|
|
end: this.dataZoomEnd(titData.length, 7),
|
|
},
|
|
series: [
|
|
{
|
|
name: '利润预测',
|
|
type: 'bar',
|
|
z: '-1',
|
|
barGap: '-75%',
|
|
barWidth: 30,
|
|
itemStyle: {
|
|
color: 'rgba(145, 213, 254, .3)',
|
|
},
|
|
data: FORECASTPROFIT,
|
|
},
|
|
{
|
|
name: '利润',
|
|
type: 'bar',
|
|
barWidth: 15,
|
|
position: [0, 0],
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear', // 线性渐变
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#B5D3FE' // 0%处的颜色为红色
|
|
}, {
|
|
offset: 1,
|
|
color: '#7EA7FC' // 100%处的颜色为蓝
|
|
}]
|
|
}
|
|
},
|
|
data: COMPLETEDPROFIT,
|
|
},
|
|
{
|
|
name: '利润目标完成率',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
smooth: false,
|
|
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
|
data: TARGETPROFIT,
|
|
itemStyle: {
|
|
color: 'rgba(85, 197, 162, 1)'
|
|
},
|
|
yAxisIndex: 1,
|
|
symbol: 'none'
|
|
}
|
|
],
|
|
})
|
|
});
|
|
// this.chart = echarts.init(this.$refs.chart);
|
|
// this.chart.setOption(this.option);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.num {
|
|
font-size: 30px;
|
|
font-family: Roboto-Black, Roboto;
|
|
font-weight: 900;
|
|
color: #f6d97e;
|
|
line-height: 35px;
|
|
// margin-right: 3px;
|
|
}
|
|
.num2 {
|
|
font-size: 30px;
|
|
font-family: Roboto-Black, Roboto;
|
|
font-weight: 900;
|
|
color: rgba(16, 152, 255, 1);
|
|
line-height: 35px;
|
|
}
|
|
</style> |