up
This commit is contained in:
熊丽君
@ -1,121 +1,128 @@
|
||||
<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>
|
||||
<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 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 echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
|
||||
import request from '@/utils/request'
|
||||
import request from "@/utils/request";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
name: "left2",
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container3,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
option: {
|
||||
legend: {
|
||||
data: ['利润', '利润预测', '利润目标完成率'],
|
||||
data: ["利润", "预测", "利润目标完成率"],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
left: "3%",
|
||||
right: "6%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
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',
|
||||
"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'
|
||||
type: "shadow",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
type: "value",
|
||||
name: "万元",
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
formatter: "{value}",
|
||||
},
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 50,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value} %'
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
@ -127,77 +134,83 @@ export default {
|
||||
dataZoom: {},
|
||||
series: [
|
||||
{
|
||||
name: '利润',
|
||||
type: 'bar',
|
||||
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
|
||||
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)'
|
||||
color: "rgb(118,196,166)",
|
||||
},
|
||||
barGap: '0'
|
||||
barGap: "0",
|
||||
},
|
||||
{
|
||||
name: '利润预测',
|
||||
type: 'bar',
|
||||
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
|
||||
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', // 线性渐变
|
||||
type: "linear", // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#B5D3FE' // 0%处的颜色为红色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#7EA7FC' // 100%处的颜色为蓝
|
||||
}]
|
||||
}
|
||||
}
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#B5D3FE", // 0%处的颜色为红色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#7EA7FC", // 100%处的颜色为蓝
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '利润目标完成率',
|
||||
type: 'line',
|
||||
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: [
|
||||
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)'
|
||||
color: "rgba(85, 197, 162, 1)",
|
||||
},
|
||||
yAxisIndex: 1,
|
||||
symbol: 'none'
|
||||
}
|
||||
symbol: "none",
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
initChart() {
|
||||
request({
|
||||
url: '/hx/cockpitOverview/profitProfile',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
url: "/hx/cockpitOverview/profitProfile",
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
let titData = [];
|
||||
let COMPLETEDPROFIT = [];
|
||||
let FORECASTPROFIT = [];
|
||||
@ -207,21 +220,21 @@ export default {
|
||||
titData.push(item.month);
|
||||
COMPLETEDPROFIT.push(item.COMPLETEDPROFIT);
|
||||
FORECASTPROFIT.push(item.FORECASTPROFIT);
|
||||
TARGETPROFIT.push(item.COMPLETEDPROFIT / item.TARGETPROFIT * 100);
|
||||
TARGETPROFIT.push((item.COMPLETEDPROFIT / item.TARGETPROFIT) * 100);
|
||||
}
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ['利润', '利润预测', '利润目标完成率'],
|
||||
data: ["利润", "预测", "利润目标完成率"],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
type: "category",
|
||||
// data: [
|
||||
// '2021-01',
|
||||
// '2021-02',
|
||||
@ -238,54 +251,54 @@ export default {
|
||||
// ],
|
||||
data: titData,
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
type: "shadow",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
type: "value",
|
||||
name: "万元",
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
formatter: "{value}",
|
||||
},
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: '{value} %'
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
@ -295,66 +308,69 @@ export default {
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titData.length, 7),
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '利润预测',
|
||||
type: 'bar',
|
||||
z: '-1',
|
||||
barGap: '-75%',
|
||||
name: "预测",
|
||||
type: "bar",
|
||||
z: "-1",
|
||||
barGap: "-75%",
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(145, 213, 254, .3)',
|
||||
color: "rgba(145, 213, 254, .3)",
|
||||
},
|
||||
data: FORECASTPROFIT,
|
||||
},
|
||||
{
|
||||
name: '利润',
|
||||
type: 'bar',
|
||||
name: "利润",
|
||||
type: "bar",
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
type: "linear", // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#B5D3FE' // 0%处的颜色为红色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#7EA7FC' // 100%处的颜色为蓝
|
||||
}]
|
||||
}
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#B5D3FE", // 0%处的颜色为红色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#7EA7FC", // 100%处的颜色为蓝
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
data: COMPLETEDPROFIT,
|
||||
},
|
||||
{
|
||||
name: '利润目标完成率',
|
||||
type: 'line',
|
||||
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)'
|
||||
color: "rgba(85, 197, 162, 1)",
|
||||
},
|
||||
yAxisIndex: 1,
|
||||
symbol: 'none'
|
||||
}
|
||||
symbol: "none",
|
||||
},
|
||||
],
|
||||
})
|
||||
});
|
||||
});
|
||||
// this.chart = echarts.init(this.$refs.chart);
|
||||
// this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user