williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

经营管理亿元修改

Browse Source
This commit is contained in:
熊丽君
2022-02-11 11:55:38 +08:00
parent 6855130280
commit 290d8ae262
1 changed files with 295 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

485
src/views/bigScreen/management/center.vue
View File

@ -3,48 +3,105 @@
<center1> <center1>
<div class="data"> <div class="data">
<div class="top_tab"> <div class="top_tab">
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['全年', '本月']"></bigScreenTabs> <bigScreenTabs
slot="datePicker"
v-model="index"
:titleArr="['全年', '本月']"
></bigScreenTabs>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><img src="./icon1.png" alt="" /><span style="font-weight: bold">收入</span></div> <div>
<div class="box"><i>{{resData.realIncome}}/</i><i class="num">{{resData.targetIncome}}</i><span class="num2">万</span></div> <img src="./icon1.png" alt="" /><span style="font-weight: bold"
>收入</span
>
</div>
<div class="box">
<i>{{ handleMillion(resData.realIncome) }}/</i
><i class="num">{{ handleMillion(resData.targetIncome) }}</i
><span class="num2">亿元</span>
</div>
<div style="width: 100%"> <div style="width: 100%">
<progressBar :percentage="resData.realIncome/resData.targetIncome*100" /> <progressBar
:percentage="(resData.realIncome / resData.targetIncome) * 100"
/>
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><img src="./icon2.png" alt="" /><span style="font-weight: bold">利润</span></div> <div>
<div class="box"><i>{{resData.realProfit}}/</i><i class="num">{{resData.targetProfit}}</i><span class="num2">万</span></div> <img src="./icon2.png" alt="" /><span style="font-weight: bold"
>利润</span
>
</div>
<div class="box">
<i>{{ handleMillion(resData.realProfit) }}/</i
><i class="num">{{ handleMillion(resData.targetProfit) }}</i
><span class="num2">亿元</span>
</div>
<div style="width: 100%"> <div style="width: 100%">
<progressBar :percentage="resData.realProfit/resData.targetProfit*100" /> <progressBar
:percentage="(resData.realProfit / resData.targetProfit) * 100"
/>
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><img src="./icon3.png" alt="" /><span style="font-weight: bold">EVA</span></div> <div>
<div class="box"><i>{{resData.realEva}}/</i><i class="num">{{resData.targetEva}}</i><span class="num2">万</span></div> <img src="./icon3.png" alt="" /><span style="font-weight: bold"
>EVA</span
>
</div>
<div class="box">
<i>{{ handleMillion(resData.realEva) }}/</i
><i class="num">{{ handleMillion(resData.targetEva) }}</i
><span class="num2">亿元</span>
</div>
<div style="width: 100%"> <div style="width: 100%">
<progressBar :percentage="resData.realEva/resData.targetEva*100" /> <progressBar
:percentage="(resData.realEva / resData.targetEva) * 100"
/>
</div> </div>
</div> </div>
<div class="data-item" style="width: 34%"> <div class="data-item" style="width: 34%">
<div><img src="./icon4.png" alt="" /><span style="font-weight: bold">两金</span></div> <div>
<img src="./icon4.png" alt="" /><span style="font-weight: bold"
>两金</span
>
</div>
<div style="display: flex"> <div style="display: flex">
<div> <div>
<div class="box" style="margin-bottom: 0"> <div class="box" style="margin-bottom: 0">
<i>{{resData.realCollection}}/</i><i class="num">{{resData.targetCollection}}</i><span class="num2">万</span> <i>{{ handleMillion(resData.realCollection) }}/</i
><i class="num">{{ handleMillion(resData.targetCollection) }}</i
><span class="num2">亿元</span>
</div> </div>
<span style="font-size: 12px; position: relative; top: -6px">产成品</span> <span style="font-size: 12px; position: relative; top: -6px"
>产成品</span
>
<div style="display: flex"> <div style="display: flex">
<progressBar :percentage="resData.realCollection/resData.targetCollection*100" /> <progressBar
:percentage="
(resData.realCollection / resData.targetCollection) * 100
"
/>
</div> </div>
</div> </div>
<div style="margin-left: 10px"> <div style="margin-left: 10px">
<div class="box" style="margin-bottom: 0"> <div class="box" style="margin-bottom: 0">
<i>{{resData.realFinishProduct}}/</i><i class="num">{{resData.targetFinishProduct}}</i><span class="num2">万</span> <i>{{ handleMillion(resData.realFinishProduct) }}/</i
><i class="num">{{
handleMillion(resData.targetFinishProduct)
}}</i
><span class="num2">亿元</span>
</div> </div>
<span style="font-size: 12px; position: relative; top: -6px">应收账款</span> <span style="font-size: 12px; position: relative; top: -6px"
>应收账款</span
>
<div style="display: flex"> <div style="display: flex">
<progressBar :percentage="resData.realFinishProduct/resData.targetFinishProduct*100" /> <progressBar
:percentage="
(resData.realFinishProduct / resData.targetFinishProduct) *
100
"
/>
</div> </div>
</div> </div>
</div> </div>
@ -52,10 +109,25 @@
</div> </div>
<div class="center_box"> <div class="center_box">
<rocketTit>经营指标完成率</rocketTit> <rocketTit>经营指标完成率</rocketTit>
<el-date-picker v-model="month" value-format="yyyy-MM" v-if="index2 == 0" type="month" size="mini" placeholder="选择月"> <el-date-picker
v-model="month"
value-format="yyyy-MM"
v-if="index2 == 0"
type="month"
size="mini"
placeholder="选择月"
>
</el-date-picker> </el-date-picker>
<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['全年', '本月']"></bigScreenTabs> <bigScreenTabs
<div style="height: 182px; width: 100%" ref="chart" v-if="index2 == 0"></div> slot="datePicker"
v-model="index2"
:titleArr="['全年', '本月']"
></bigScreenTabs>
<div
style="height: 182px; width: 100%"
ref="chart"
v-if="index2 == 0"
></div>
<div style="height: 182px; width: 100%" ref="chart4" v-else></div> <div style="height: 182px; width: 100%" ref="chart4" v-else></div>
</div> </div>
<div class="center_box"> <div class="center_box">
@ -74,19 +146,23 @@
</template> </template>
<script> <script>
import center1 from './components/center1/index.vue' import center1 from "./components/center1/index.vue";
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from "../components/rocketTit/index.vue";
import bigScreenTabs from '../components/bigScreenTabs/index.vue' import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import progressBar from './../components/progress/index.vue' import progressBar from "./../components/progress/index.vue";
import colorList from '@/utils/colorPalette' import colorList from "@/utils/colorPalette";
import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor' import {
blueColorList,
greenColorList,
yelloColorList,
} from "@/utils/gradualColor";
import echarts from 'echarts' import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from "../../dashboard/mixins/resize";
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left1', name: "left1",
components: { components: {
center1, center1,
rocketTit, rocketTit,
@ -97,7 +173,7 @@ export default {
return { return {
index: 0, index: 0,
index2: 0, index2: 0,
month: '', month: "",
chart: null, chart: null,
chart2: null, chart2: null,
chart3: null, chart3: null,
@ -114,19 +190,19 @@ export default {
targetIncome: 0, targetIncome: 0,
targetProfit: 0, targetProfit: 0,
}, },
} };
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
this.initChart2() this.initChart2();
this.getData(1); this.getData(1);
}) });
}, },
beforeDestroy() {}, beforeDestroy() {},
watch: { watch: {
month(newVal) { month(newVal) {
this.initChart(newVal) this.initChart(newVal);
}, },
index(newVal, oldVal) { index(newVal, oldVal) {
if (newVal == 0) { if (newVal == 0) {
@ -137,61 +213,61 @@ export default {
}, },
index2(newVal, oldVal) { index2(newVal, oldVal) {
if (newVal == 0) { if (newVal == 0) {
this.chart4.dispose() this.chart4.dispose();
this.chart4 = null this.chart4 = null;
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
} else { } else {
this.chart.dispose() this.chart.dispose();
this.chart = null this.chart = null;
this.$nextTick(() => { this.$nextTick(() => {
this.initChart4() this.initChart4();
}) });
} }
}, },
}, },
methods: { methods: {
getData(type) { getData(type) {
this.request({ this.request({
url: '/hx/operating/getFactoryOperateIndexPic', url: "/hx/operating/getFactoryOperateIndexPic",
method: 'get', method: "get",
params: { type: type } params: { type: type },
}).then(res => { }).then((res) => {
if (200 == res.code && res.data) { if (200 == res.code && res.data) {
this.resData = res.data; this.resData = res.data;
} }
}) });
}, },
initChart(month) { initChart(month) {
let params = { type: 2 }; let params = { type: 2 };
if (month) { if (month) {
params['month'] = month params["month"] = month;
} }
if (this.chart) { if (this.chart) {
this.chart.dispose(); this.chart.dispose();
this.chart = null; this.chart = null;
} }
this.request({ this.request({
url: '/hx/operating/getDeptOperateIndexPic', url: "/hx/operating/getDeptOperateIndexPic",
method: 'get', method: "get",
params: params params: params,
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let { list } = res.data; let { list } = res.data;
this.chart = echarts.init(this.$refs.chart, 'macarons') this.chart = echarts.init(this.$refs.chart, "macarons");
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
// trigger: 'axis', // trigger: 'axis',
// formatter: '{a1}<br/>{b1}：{c1}', // formatter: '{a1}<br/>{b1}：{c1}',
}, },
legend: { legend: {
data: ['数量', '完成率'], data: ["数量", "完成率"],
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: "#fff", //legend字体颜色
}, },
left: 'left', left: "left",
left: '10%', left: "10%",
// selectedMode: false, // selectedMode: false,
}, },
grid: { grid: {
@ -202,11 +278,11 @@ export default {
bottom: 0, bottom: 0,
}, },
xAxis: { xAxis: {
data: list.map(e => e.deptName), data: list.map((e) => e.deptName),
// data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'], // data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
@ -215,34 +291,34 @@ export default {
// start: 0, // start: 0,
// end: 50, // end: 50,
// }, // },
color: ['#ccc', 'red'], color: ["#ccc", "red"],
yAxis: [ yAxis: [
{ {
name: '个', name: "个",
splitLine: { splitLine: {
show: true, show: true,
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
min: 0, min: 0,
max: 100, max: 100,
interval: 20, interval: 20,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -252,7 +328,7 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
@ -270,15 +346,15 @@ export default {
// data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95], // data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
// }, // },
{ {
name: '数量', name: "数量",
type: 'bar', type: "bar",
barWidth: 30, barWidth: 30,
position: [0, 0], position: [0, 0],
data: list.map(e => e.realIncome), data: list.map((e) => e.realIncome),
// data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75], // data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', // 线性渐变 type: "linear", // 线性渐变
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -286,93 +362,91 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#B5D3FE', color: "#B5D3FE",
}, },
{ {
offset: 1, offset: 1,
color: '#7EA7FC', color: "#7EA7FC",
}, },
], ],
}, },
}, },
}, },
{ {
name: '完成率', name: "完成率",
type: 'scatter', type: "scatter",
symbol: 'rect', symbol: "rect",
symbolSize: [30, 4], symbolSize: [30, 4],
symbolOffset: [0, 0], symbolOffset: [0, 0],
position: [0, 0], position: [0, 0],
yAxisIndex: 1, yAxisIndex: 1,
itemStyle: { itemStyle: {
color: '#F6D97E', color: "#F6D97E",
}, },
data: list.map(e => e.rate), data: list.map((e) => e.rate),
// data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90], // data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
}, },
], ],
}) });
} }
}) });
}, },
// 折线图 // 折线图
initChart2() { initChart2() {
this.request({ this.request({
url: '/hx/operating/getCostAnalysisPic', url: "/hx/operating/getCostAnalysisPic",
method: 'get', method: "get",
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let { list, rate } = res.data; let { list, rate } = res.data;
this.chart2 = echarts.init(this.$refs.chart2, 'macarons') this.chart2 = echarts.init(this.$refs.chart2, "macarons");
this.setOptions2(list); this.setOptions2(list);
this.initChart3(rate); this.initChart3(rate);
} }
}) });
}, },
setOptions2(list) { setOptions2(list) {
this.chart2.setOption({ this.chart2.setOption({
legend: { legend: {
left: 'right', left: "right",
textStyle: { textStyle: {
color: '#fff', color: "#fff",
}, },
}, },
grid: { grid: {
top: '3%', top: "3%",
left: '3%', left: "3%",
right: '6%', right: "6%",
bottom: '3%', bottom: "3%",
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: list.map(e=>e.month), data: list.map((e) => e.month),
// axisPointer: { // axisPointer: {
// type: 'shadow', // type: 'shadow',
// }, // },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
min: 0, min: 0,
max: 100, max: 100,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
// show: false, //不显示网格线 // show: false, //不显示网格线
lineStyle: { lineStyle: {
color: '#2b3b6c', color: "#2b3b6c",
}, },
}, },
// splitArea: { // splitArea: {
@ -380,58 +454,58 @@ export default {
// }, // },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
grid: { grid: {
containLabel: true, containLabel: true,
width: '99%', width: "99%",
left: 0, left: 0,
top: 30, top: 30,
bottom: 0, bottom: 0,
}, },
series: [ series: [
{ {
name: '预算执行率', name: "预算执行率",
type: 'line', type: "line",
yAxisIndex: 0, yAxisIndex: 0,
smooth: false, smooth: false,
// //
data: list.map(e=>e.rate), data: list.map((e) => e.rate),
// data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70], // data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
itemStyle: { itemStyle: {
color: '#1098FF', color: "#1098FF",
}, },
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: 'rgba(16, 152, 255, 1)', color: "rgba(16, 152, 255, 1)",
}, },
{ {
offset: 1, offset: 1,
color: 'rgba(51, 65, 106, 0.18)', color: "rgba(51, 65, 106, 0.18)",
}, },
]), ]),
}, },
symbol: 'none', symbol: "none",
}, },
], ],
}) });
}, },
initChart3(rate) { initChart3(rate) {
if (!rate) { if (!rate) {
return; return;
} }
this.chart3 = echarts.init(this.$refs.chart3, 'macarons') this.chart3 = echarts.init(this.$refs.chart3, "macarons");
this.setOptions3(rate) this.setOptions3(rate);
}, },
setOptions3(rate) { setOptions3(rate) {
this.chart3.setOption({ this.chart3.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
}, },
// color: colorList, // color: colorList,
// legend: { // legend: {
@ -446,113 +520,113 @@ export default {
// }, // },
series: [ series: [
{ {
name: '占比', name: "占比",
type: 'pie', type: "pie",
center: ['50%', '50%'], center: ["50%", "50%"],
radius: ['65%', '85%'], radius: ["65%", "85%"],
clockWise: false, // 逆时针 clockWise: false, // 逆时针
hoverAnimation: false, // hover 效果 hoverAnimation: false, // hover 效果
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center', position: "center",
}, },
emphasis: { emphasis: {
label: { label: {
show: false, show: false,
fontSize: '40', fontSize: "40",
fontWeight: 'bold', fontWeight: "bold",
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
}, },
data: [ data: [
{ value: rate.total, name: '总2' }, { value: rate.total, name: "总2" },
{ value: rate.toolingTotal, name: '工装成本占比' }, { value: rate.toolingTotal, name: "工装成本占比" },
], ],
color: ['#73cdcf', '#2f6a74'], color: ["#73cdcf", "#2f6a74"],
}, },
{ {
name: '占比', name: "占比",
type: 'pie', type: "pie",
radius: ['30%', '50%'], radius: ["30%", "50%"],
center: ['50%', '50%'], center: ["50%", "50%"],
clockWise: false, // 逆时针 clockWise: false, // 逆时针
hoverAnimation: false, // hover 效果 hoverAnimation: false, // hover 效果
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center', position: "center",
}, },
emphasis: { emphasis: {
label: { label: {
show: false, show: false,
fontSize: '40', fontSize: "40",
fontWeight: 'bold', fontWeight: "bold",
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
}, },
data: [ data: [
{ value: rate.total, name: '总1' }, { value: rate.total, name: "总1" },
{ value: rate.materialTotal, name: '原材料成本占比' }, { value: rate.materialTotal, name: "原材料成本占比" },
], ],
color: ['#f6d97e', '#7f7462'], color: ["#f6d97e", "#7f7462"],
}, },
], ],
}) });
}, },
initChart4() { initChart4() {
this.request({ this.request({
url: '/hx/operating/getDeptOperateIndexPic', url: "/hx/operating/getDeptOperateIndexPic",
method: 'get', method: "get",
params: { type: 1 } params: { type: 1 },
}).then(res => { }).then((res) => {
if (200 == res.code) { if (200 == res.code) {
let { list } = res.data; let { list } = res.data;
this.chart4 = echarts.init(this.$refs.chart4) this.chart4 = echarts.init(this.$refs.chart4);
this.chart4.setOption({ this.chart4.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'shadow', type: "shadow",
}, },
}, },
legend: { legend: {
orient: 'vertical', orient: "vertical",
x: 'right', x: "right",
// y: 'center', // y: 'center',
top: '20%', top: "20%",
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: "#fff", //legend字体颜色
}, },
}, },
grid: { grid: {
left: 20, left: 20,
right: '25%', right: "25%",
top: 30, top: 30,
bottom: 50, bottom: 50,
containLabel: true, containLabel: true,
}, },
dataZoom: { dataZoom: {
type: 'slider', type: "slider",
// start: 0, // start: 0,
// end: 50, // end: 50,
textStyle: { textStyle: {
color: '#fff', color: "#fff",
}, },
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: list.map(e => e.month), data: list.map((e) => e.month),
// data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'], // data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
@ -564,22 +638,22 @@ export default {
// 改变轴线颜色 // 改变轴线颜色
lineStyle: { lineStyle: {
// 使用深浅的间隔色 // 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'], color: ["rgba(255, 255, 255,.5)"],
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
{ {
type: 'value', type: "value",
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
}, },
splitLine: { splitLine: {
show: false, //不显示网格线 show: false, //不显示网格线
@ -589,125 +663,124 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: "rgb(255, 255, 255)",
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: 'EVA', name: "EVA",
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#F6D97E', color: "#F6D97E",
}, },
barWidth: 30, barWidth: 30,
data: list.map(e => e.realEva) data: list.map((e) => e.realEva),
// data: [150, 232, 201, 154, 190, 330, 410], // data: [150, 232, 201, 154, 190, 330, 410],
}, },
{ {
name: '两金', name: "两金",
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#F89343', color: "#F89343",
}, },
barWidth: 30, barWidth: 30,
data: list.map(e => e.realCollection) data: list.map((e) => e.realCollection),
// data: [150, 232, 201, 154, 190, 330, 410], // data: [150, 232, 201, 154, 190, 330, 410],
}, },
{ {
name: '利润', name: "利润",
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#83DDC5', color: "#83DDC5",
}, },
barWidth: 30, barWidth: 30,
data: list.map(e => e.realProfit) data: list.map((e) => e.realProfit),
// data: [150, 232, 201, 154, 190, 330, 410], // data: [150, 232, 201, 154, 190, 330, 410],
}, },
{ {
name: '收入', name: "收入",
type: 'bar', type: "bar",
stack: 'Ad', stack: "Ad",
emphasis: { emphasis: {
focus: 'series', focus: "series",
}, },
itemStyle: { itemStyle: {
color: '#ADCDFD', color: "#ADCDFD",
}, },
barWidth: 30, barWidth: 30,
data: list.map(e => e.realIncome) data: list.map((e) => e.realIncome),
// data: [150, 232, 201, 154, 190, 330, 410], // data: [150, 232, 201, 154, 190, 330, 410],
}, },
{ {
name: '收入完成率', name: "收入完成率",
type: 'line', type: "line",
smooth: false, smooth: false,
data: list.map(e => e.incomeRate), data: list.map((e) => e.incomeRate),
// data: [500, 550, 700, 520, 650, 520, 550], // data: [500, 550, 700, 520, 650, 520, 550],
itemStyle: { itemStyle: {
color: '#8BB1ED', color: "#8BB1ED",
}, },
symbol: 'none', symbol: "none",
}, },
{ {
name: '利润完成率', name: "利润完成率",
type: 'line', type: "line",
smooth: false, smooth: false,
itemStyle: { itemStyle: {
color: '#53C19D', color: "#53C19D",
}, },
data: list.map(e => e.profitRate), data: list.map((e) => e.profitRate),
// data: [600, 500, 700, 620, 750, 800, 600], // data: [600, 500, 700, 620, 750, 800, 600],
symbol: 'none', symbol: "none",
}, },
{ {
name: '两金完成率', name: "两金完成率",
type: 'line', type: "line",
yAxisIndex: 1, yAxisIndex: 1,
smooth: false, smooth: false,
data: list.map(e => e.collectionRate), data: list.map((e) => e.collectionRate),
// data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70], // data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
itemStyle: { itemStyle: {
color: '#F64F58', color: "#F64F58",
}, },
symbol: 'none', symbol: "none",
}, },
{ {
name: 'EVA完成率', name: "EVA完成率",
type: 'line', type: "line",
yAxisIndex: 1, yAxisIndex: 1,
smooth: false, smooth: false,
data: list.map(e => e.evaRate), data: list.map((e) => e.evaRate),
itemStyle: { itemStyle: {
color: '#F6D97E', color: "#F6D97E",
}, },
symbol: 'none', symbol: "none",
}, },
], ],
}) });
} }
}) });
// this.setOptions4() // this.setOptions4()
}, },
// setOptions4 () { // setOptions4 () {
// }, // },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>