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