zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 生产报告图表优化

This commit is contained in:
caoqianming 2024-12-30 13:55:59 +08:00
parent 589d30de9b
commit e0e043398f
7 changed files with 236 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/views/enm_coal/report.vue
View File

@ -94,9 +94,9 @@
> >
<!-- <el-radio-button label="day">本日</el-radio-button> --> <!-- <el-radio-button label="day">本日</el-radio-button> -->
<el-radio-button label="month" <el-radio-button label="month"
>日</el-radio-button >按日</el-radio-button
> >
<el-radio-button label="year">月</el-radio-button> <el-radio-button label="year">按月</el-radio-button>
</el-radio-group> </el-radio-group>
<div style="position: absolute; right: 20px"> <div style="position: absolute; right: 20px">
<el-date-picker <el-date-picker
@ -170,7 +170,7 @@
</div> </div>
</template> </template>
<script> <script>
const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#4472c4"]; const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#4472c4", "#91d024"];
let tooltip = { let tooltip = {
show: true, show: true,
trigger: "axis", trigger: "axis",
@ -187,14 +187,24 @@ let grid = {
top: "20%", top: "20%",
}; };
let toolbox = { let toolbox = {
right: "2%", right: 0,
feature: { feature: {
dataView: { show: true, readOnly: false }, dataView: { show: true, readOnly: false },
// restore: { show: true },
saveAsImage: { show: true }, saveAsImage: { show: true },
}, },
orient: "vertical",
}; };
let legend = { let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%", top: "2%",
data: ["总产量", "台时产量", "运转率", "分布电耗"], data: ["总产量", "台时产量", "运转率", "分布电耗"],
}; };
@ -204,7 +214,7 @@ let yAxis = [
name: "产量 (t)", name: "产量 (t)",
position: "left", position: "left",
alignTicks: true, alignTicks: true,
nameRotate: 30, nameRotate: 50,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -215,14 +225,30 @@ let yAxis = [
formatter: "{value}", formatter: "{value}",
}, },
}, },
{
type: "value",
name: "台时(t/h)",
position: "left",
alignTicks: true,
nameRotate: 50,
offset: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
axisLabel: {
formatter: "{value}",
},
},
{ {
type: "value", type: "value",
name: "运转率 (%)", name: "运转率 (%)",
position: "right", position: "right",
alignTicks: true, alignTicks: true,
offset: 60, offset: 50,
max: 100, nameRotate: 50,
nameRotate: 30,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -238,28 +264,11 @@ let yAxis = [
name: "分布电耗(kW·h/t)", name: "分布电耗(kW·h/t)",
position: "right", position: "right",
alignTicks: true, alignTicks: true,
nameRotate: 30, nameRotate: 50,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: colors[2], color: colors[3],
},
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "台时(t/h)",
position: "left",
alignTicks: true,
nameRotate: 30,
offset: 60,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
}, },
}, },
axisLabel: { axisLabel: {
@ -268,7 +277,6 @@ let yAxis = [
}, },
]; ];
import scEcharts from "@/components/scEcharts"; import scEcharts from "@/components/scEcharts";
import { max } from "d3";
import { defineAsyncComponent } from "vue"; import { defineAsyncComponent } from "vue";
export default { export default {
components: { components: {
@ -349,19 +357,19 @@ export default {
{ {
name: "台时产量", name: "台时产量",
type: "bar", type: "bar",
yAxisIndex: 0, yAxisIndex: 1,
data: [], data: [],
}, },
{ {
name: "运转率", name: "运转率",
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 2,
data: [], data: [],
}, },
{ {
name: "分布电耗", name: "分布电耗",
type: "bar", type: "bar",
yAxisIndex: 2, yAxisIndex: 3,
data: [], data: [],
}, },
], ],
@ -392,19 +400,19 @@ export default {
{ {
name: "台时产量", name: "台时产量",
type: "bar", type: "bar",
yAxisIndex: 3, yAxisIndex: 1,
data: [], data: [],
}, },
{ {
name: "运转率", name: "运转率",
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 2,
data: [], data: [],
}, },
{ {
name: "分布电耗", name: "分布电耗",
type: "bar", type: "bar",
yAxisIndex: 2, yAxisIndex: 3,
data: [], data: [],
}, },
], ],
@ -447,19 +455,19 @@ export default {
{ {
name: "台时产量", name: "台时产量",
type: "bar", type: "bar",
yAxisIndex: 0, yAxisIndex: 1,
data: [], data: [],
}, },
{ {
name: "运转率", name: "运转率",
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 2,
data: [], data: [],
}, },
{ {
name: "分布电耗", name: "分布电耗",
type: "bar", type: "bar",
yAxisIndex: 2, yAxisIndex: 3,
data: [], data: [],
}, },
], ],

98
src/views/enm_kiln/report.vue
View File

@ -104,11 +104,11 @@
v-model="typeRadio" v-model="typeRadio"
@change="typeRadioChange" @change="typeRadioChange"
> >
<el-radio-button label="day">小时</el-radio-button> <el-radio-button label="day">按时</el-radio-button>
<el-radio-button label="month" <el-radio-button label="month"
>日</el-radio-button >按日</el-radio-button
> >
<el-radio-button label="year">月</el-radio-button> <el-radio-button label="year">按月</el-radio-button>
</el-radio-group> </el-radio-group>
<div style="position: absolute; right: 20px"> <div style="position: absolute; right: 20px">
<el-date-picker <el-date-picker
@ -140,6 +140,7 @@
></el-date-picker> ></el-date-picker>
</div> </div>
</div> </div>
<div class="chartWrap" v-show="typeRadio == 'day'"> <div class="chartWrap" v-show="typeRadio == 'day'">
<div class="chartTitle">本日生产参数统计图</div> <div class="chartTitle">本日生产参数统计图</div>
<scEcharts <scEcharts
@ -287,14 +288,8 @@
</div> </div>
</template> </template>
<script> <script>
const colors = [ const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#5f6694", "#cb9bff"];
"#647bfe", // 产量/台时/运转率/分布电耗/单位产品标煤耗/成本
"#8698fe",
"#a9b6fe",
"#cbd3fe",
"#91CC75",
"#EE6666",
];
let tooltip = { let tooltip = {
show: true, show: true,
trigger: "axis", trigger: "axis",
@ -306,18 +301,29 @@ let tooltip = {
triggerOn: "mousemove", triggerOn: "mousemove",
}; };
let grid = { let grid = {
right: "12%", right: "11%",
left: "10%", left: "11%",
top: "20%", top: "20%",
}; };
let toolbox = { let toolbox = {
right: "2%", right: 0,
feature: { feature: {
dataView: { show: true, readOnly: false }, dataView: { show: true, readOnly: false },
saveAsImage: { show: true }, saveAsImage: { show: true },
}, },
orient: "vertical",
}; };
let legend = { let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%", top: "2%",
data: [ data: [
"总产量", "总产量",
@ -334,7 +340,7 @@ let yAxis = [
name: "产量 (t)", name: "产量 (t)",
position: "left", position: "left",
alignTicks: true, alignTicks: true,
nameRotate: 30, nameRotate: 50,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -345,14 +351,30 @@ let yAxis = [
formatter: "{value}", formatter: "{value}",
}, },
}, },
{
type: "value",
name: "台时产量 (t/h)",
position: "left",
alignTicks: true,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
offset: 100,
axisLabel: {
formatter: "{value}",
},
},
{ {
type: "value", type: "value",
name: "运转率(%) ", name: "运转率(%) ",
position: "right", position: "right",
alignTicks: true, alignTicks: true,
nameRotate: 30, nameRotate: 50,
offset: 120, offset: 100,
max:100,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -368,7 +390,7 @@ let yAxis = [
name: "分布电耗(kW·h/t)", name: "分布电耗(kW·h/t)",
position: "right", position: "right",
alignTicks: true, alignTicks: true,
nameRotate: 30, nameRotate: 50,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -384,8 +406,8 @@ let yAxis = [
name: "标煤耗(kgce/t)", name: "标煤耗(kgce/t)",
position: "right", position: "right",
alignTicks: true, alignTicks: true,
nameRotate: 30, nameRotate: 50,
offset: 60, offset: 50,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -401,8 +423,8 @@ let yAxis = [
name: "成本(元/吨)", name: "成本(元/吨)",
position: "left", position: "left",
alignTicks: true, alignTicks: true,
nameRotate: 30, nameRotate: 50,
offset: 60, offset: 50,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -469,15 +491,7 @@ export default {
tooltip: tooltip, tooltip: tooltip,
grid: grid, grid: grid,
toolbox: toolbox, toolbox: toolbox,
legend: { legend: Object.assign(legend, {data: ["总产量", "分布电耗", "单位产品标煤耗", "成本"]}),
top: "2%",
data: [
"总产量",
"分布电耗",
"单位产品标煤耗",
"成本",
],
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: true, show: true,
@ -565,31 +579,31 @@ export default {
{ {
name: "台时产量", name: "台时产量",
type: "bar", type: "bar",
yAxisIndex: 0, yAxisIndex: 1,
data: [], data: [],
}, },
{ {
name: "运转率", name: "运转率",
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 2,
data: [], data: [],
}, },
{ {
name: "分布电耗", name: "分布电耗",
type: "bar", type: "bar",
yAxisIndex: 2, yAxisIndex: 3,
data: [], data: [],
}, },
{ {
name: "单位产品标煤耗", name: "单位产品标煤耗",
type: "bar", type: "bar",
yAxisIndex: 3, yAxisIndex: 4,
data: [], data: [],
}, },
{ {
name: "成本", name: "成本",
type: "bar", type: "bar",
yAxisIndex: 4, yAxisIndex: 5,
data: [], data: [],
}, },
], ],
@ -619,31 +633,31 @@ export default {
{ {
name: "台时产量", name: "台时产量",
type: "bar", type: "bar",
yAxisIndex: 0, yAxisIndex: 1,
data: [], data: [],
}, },
{ {
name: "运转率", name: "运转率",
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 2,
data: [], data: [],
}, },
{ {
name: "分布电耗", name: "分布电耗",
type: "bar", type: "bar",
yAxisIndex: 2, yAxisIndex: 3,
data: [], data: [],
}, },
{ {
name: "单位产品标煤耗", name: "单位产品标煤耗",
type: "bar", type: "bar",
yAxisIndex: 3, yAxisIndex: 4,
data: [], data: [],
}, },
{ {
name: "成本", name: "成本",
type: "bar", type: "bar",
yAxisIndex: 4, yAxisIndex: 5,
data: [], data: [],
}, },
], ],

30
src/views/enm_mill/report.vue
View File

@ -93,9 +93,9 @@
v-model="typeRadio" v-model="typeRadio"
@change="typeRadioChange" @change="typeRadioChange"
> >
<el-radio-button label="day">小时</el-radio-button> <el-radio-button label="day">按时</el-radio-button>
<el-radio-button label="month">日</el-radio-button> <el-radio-button label="month">按日</el-radio-button>
<el-radio-button label="year">月</el-radio-button> <el-radio-button label="year">按月</el-radio-button>
</el-radio-group> </el-radio-group>
<div style="position: absolute; right: 20px"> <div style="position: absolute; right: 20px">
<el-date-picker <el-date-picker
@ -274,14 +274,7 @@
</div> </div>
</template> </template>
<script> <script>
const colors = [ const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#cb9bff"];
"#647bfe",
"#8698fe",
"#a9b6fe",
"#cbd3fe",
"#91CC75",
"#EE6666",
];
let tooltip = { let tooltip = {
show: true, show: true,
trigger: "axis", trigger: "axis",
@ -305,6 +298,16 @@ let toolbox = {
}, },
}; };
let legend = { let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%", top: "2%",
data: ["总产量", "台时产量", "运转率", "分布电耗", "成本"], data: ["总产量", "台时产量", "运转率", "分布电耗", "成本"],
}; };
@ -428,10 +431,7 @@ export default {
tooltip: tooltip, tooltip: tooltip,
grid: grid, grid: grid,
toolbox: toolbox, toolbox: toolbox,
legend: { legend: Object.assign(legend, {data: ["总产量", "分布电耗", "成本"]}),
top: "2%",
data: ["总产量", "分布电耗", "成本"],
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: true, show: true,

27
src/views/enm_pack/report.vue
View File

@ -73,8 +73,8 @@
v-model="typeRadio" v-model="typeRadio"
@change="typeRadioChange" @change="typeRadioChange"
> >
<el-radio-button label="month">日</el-radio-button> <el-radio-button label="month">按日</el-radio-button>
<el-radio-button label="year">月</el-radio-button> <el-radio-button label="year">按月</el-radio-button>
</el-radio-group> </el-radio-group>
<div style="position: absolute; right: 20px"> <div style="position: absolute; right: 20px">
<el-date-picker <el-date-picker
@ -244,7 +244,7 @@
</div> </div>
</template> </template>
<script> <script>
const colors = ["#647bfe", "#cbd3fe", "#91CC75", "#EE6666", "#CC00CC", "#551e13"]; const colors = ["#5b9bd5", "#cbd3fe", "#91CC75", "#EE6666", "#CC00CC", "#551e13"];
let tooltip = { let tooltip = {
show: true, show: true,
trigger: "axis", trigger: "axis",
@ -256,18 +256,29 @@ let tooltip = {
triggerOn: "mousemove", triggerOn: "mousemove",
}; };
let grid = { let grid = {
right: "4%", right: "11%",
left: "4%", left: "11%",
top: "15%", top: "24%",
}; };
let toolbox = { let toolbox = {
right: "2%", right: 0,
feature: { feature: {
dataView: { show: true, readOnly: false }, dataView: { show: true, readOnly: false },
saveAsImage: { show: true }, saveAsImage: { show: true },
}, },
orient: "vertical",
}; };
let legend = { let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%", top: "2%",
data: ["袋装合计", "散装合计", "熟料出厂合计", "出厂水泥合计", "复合水泥合计"],} data: ["袋装合计", "散装合计", "熟料出厂合计", "出厂水泥合计", "复合水泥合计"],}
@ -286,6 +297,7 @@ let yAxis = [
axisLabel: { axisLabel: {
formatter: "{value}", formatter: "{value}",
}, },
nameRotate: 50,
}, },
{ {
type: "value", type: "value",
@ -301,6 +313,7 @@ let yAxis = [
axisLabel: { axisLabel: {
formatter: "{value}", formatter: "{value}",
}, },
nameRotate: 50,
}, },
]; ];
import scEcharts from "@/components/scEcharts"; import scEcharts from "@/components/scEcharts";

57
src/views/enm_rm/report.vue
View File

@ -91,11 +91,11 @@
v-model="typeRadio" v-model="typeRadio"
@change="typeRadioChange" @change="typeRadioChange"
> >
<el-radio-button label="day">本日</el-radio-button> <el-radio-button label="day">按时</el-radio-button>
<el-radio-button label="month" <el-radio-button label="month"
>本月</el-radio-button >按日</el-radio-button
> >
<el-radio-button label="year">本年</el-radio-button> <el-radio-button label="year">按月</el-radio-button>
</el-radio-group> </el-radio-group>
<div style="position: absolute; right: 20px"> <div style="position: absolute; right: 20px">
<el-date-picker <el-date-picker
@ -275,14 +275,7 @@
</div> </div>
</template> </template>
<script> <script>
const colors = [ const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#4472c4", "#91d024"];
"#17E8EF",
"#FFECA1",
"#3F662F",
"#BC1012",
"#4AE20D",
"#EFC3CA",
];
let tooltip = { let tooltip = {
show: true, show: true,
trigger: "axis", trigger: "axis",
@ -297,16 +290,27 @@ let tooltip = {
let grid = { let grid = {
right: "11%", right: "11%",
left: "11%", left: "11%",
top: "15%", top: "20%",
}; };
let toolbox = { let toolbox = {
right: "2%", right: 0,
feature: { feature: {
dataView: { show: true, readOnly: false }, dataView: { show: true, readOnly: false },
saveAsImage: { show: true }, saveAsImage: { show: true },
}, },
orient: "vertical",
}; };
let legend = { let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%", top: "2%",
data: ["总产量", "台时产量", "运转率", "分布电耗"], data: ["总产量", "台时产量", "运转率", "分布电耗"],
}; };
@ -325,13 +329,31 @@ let yAxis = [
axisLabel: { axisLabel: {
formatter: "{value}", formatter: "{value}",
}, },
nameRotate: 50
},
{
type: "value",
name: "台时产量 (t/h)",
position: "left",
alignTicks: true,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
offset: 50,
axisLabel: {
formatter: "{value}",
},
}, },
{ {
type: "value", type: "value",
name: "运转率 (%)", name: "运转率 (%)",
position: "right", position: "right",
alignTicks: true, alignTicks: true,
offset: 80, offset: 50,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -341,6 +363,7 @@ let yAxis = [
axisLabel: { axisLabel: {
formatter: "{value}", formatter: "{value}",
}, },
nameRotate: 50
}, },
{ {
type: "value", type: "value",
@ -356,6 +379,7 @@ let yAxis = [
axisLabel: { axisLabel: {
formatter: "{value}", formatter: "{value}",
}, },
nameRotate: 50
}, },
]; ];
import * as echarts from "echarts"; import * as echarts from "echarts";
@ -409,10 +433,7 @@ export default {
tooltip: tooltip, tooltip: tooltip,
grid: grid, grid: grid,
toolbox: toolbox, toolbox: toolbox,
legend: { legend: Object.assign(legend, {data: ["总产量", "分布电耗"]}),
top: "2%",
data: ["总产量", "分布电耗"],
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: true, show: true,

63
src/views/enm_rm_copy/report.vue
View File

@ -91,11 +91,11 @@
v-model="typeRadio" v-model="typeRadio"
@change="typeRadioChange" @change="typeRadioChange"
> >
<el-radio-button label="day">本日</el-radio-button> <el-radio-button label="day">按时</el-radio-button>
<el-radio-button label="month" <el-radio-button label="month"
>本月</el-radio-button >按日</el-radio-button
> >
<el-radio-button label="year">本年</el-radio-button> <el-radio-button label="year">按月</el-radio-button>
</el-radio-group> </el-radio-group>
<div style="position: absolute; right: 20px"> <div style="position: absolute; right: 20px">
<el-date-picker <el-date-picker
@ -275,14 +275,7 @@
</div> </div>
</template> </template>
<script> <script>
const colors = [ const colors = ["#5b9bd5", "#ed7d31", "#70ad47", "#ffc000", "#cb9bff"];
"#647bfe",
"#8698fe",
"#a9b6fe",
"#cbd3fe",
"#91CC75",
"#EE6666",
];
let tooltip = { let tooltip = {
show: true, show: true,
trigger: "axis", trigger: "axis",
@ -297,14 +290,15 @@ let tooltip = {
let grid = { let grid = {
right: "10%", right: "10%",
left: "10%", left: "10%",
top: "15%", top: "20%",
}; };
let toolbox = { let toolbox = {
right: "2%", right: 0,
feature: { feature: {
dataView: { show: true, readOnly: false }, dataView: { show: true, readOnly: false },
saveAsImage: { show: true }, saveAsImage: { show: true },
}, },
orient: "vertical",
}; };
let legend = { let legend = {
top: "2%", top: "2%",
@ -325,13 +319,31 @@ let yAxis = [
axisLabel: { axisLabel: {
formatter: "{value}", formatter: "{value}",
}, },
nameRotate: 50
},
{
type: "value",
name: "台时产量 (t/h)",
position: "left",
alignTicks: true,
nameRotate: 50,
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
offset: 100,
axisLabel: {
formatter: "{value}",
},
}, },
{ {
type: "value", type: "value",
name: "运转率 (%)", name: "运转率 (%)",
position: "right", position: "right",
alignTicks: true, alignTicks: true,
offset: 80, offset: 50,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -341,6 +353,7 @@ let yAxis = [
axisLabel: { axisLabel: {
formatter: "{value}", formatter: "{value}",
}, },
nameRotate: 50
}, },
{ {
type: "value", type: "value",
@ -356,13 +369,14 @@ let yAxis = [
axisLabel: { axisLabel: {
formatter: "{value}", formatter: "{value}",
}, },
nameRotate: 50
}, },
{ {
type: "value", type: "value",
name: "成本(元/吨)", name: "成本(元/吨)",
position: "left", position: "left",
alignTicks: true, alignTicks: true,
offset: 70, offset: 50,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -372,6 +386,7 @@ let yAxis = [
axisLabel: { axisLabel: {
formatter: "{value}", formatter: "{value}",
}, },
nameRotate: 50
}, },
]; ];
import * as echarts from "echarts"; import * as echarts from "echarts";
@ -449,25 +464,25 @@ export default {
{ {
name: "台时产量", name: "台时产量",
type: "bar", type: "bar",
yAxisIndex: 0, yAxisIndex: 1,
data: [], data: [],
}, },
{ {
name: "运转率", name: "运转率",
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 2,
data: [], data: [],
}, },
{ {
name: "分布电耗", name: "分布电耗",
type: "bar", type: "bar",
yAxisIndex: 2, yAxisIndex: 3,
data: [], data: [],
}, },
{ {
name: "成本", name: "成本",
type: "bar", type: "bar",
yAxisIndex: 3, yAxisIndex: 4,
data: [], data: [],
}, },
], ],
@ -511,25 +526,25 @@ export default {
{ {
name: "台时产量", name: "台时产量",
type: "bar", type: "bar",
yAxisIndex: 0, yAxisIndex: 1,
data: [], data: [],
}, },
{ {
name: "运转率", name: "运转率",
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 2,
data: [], data: [],
}, },
{ {
name: "分布电耗", name: "分布电耗",
type: "bar", type: "bar",
yAxisIndex: 2, yAxisIndex: 3,
data: [], data: [],
}, },
{ {
name: "成本", name: "成本",
type: "bar", type: "bar",
yAxisIndex: 3, yAxisIndex: 4,
data: [], data: [],
}, },
], ],
@ -573,7 +588,7 @@ export default {
{ {
name: "台时产量", name: "台时产量",
type: "bar", type: "bar",
yAxisIndex: 0, yAxisIndex: 1,
data: [], data: [],
}, },
{ {

31
src/views/enm_slag/report.vue
View File

@ -84,9 +84,9 @@
@change="typeRadioChange" @change="typeRadioChange"
> >
<el-radio-button label="month" <el-radio-button label="month"
>日</el-radio-button >按日</el-radio-button
> >
<el-radio-button label="year">月</el-radio-button> <el-radio-button label="year">按月</el-radio-button>
</el-radio-group> </el-radio-group>
<div style="position: absolute; right: 20px"> <div style="position: absolute; right: 20px">
<el-date-picker <el-date-picker
@ -251,7 +251,7 @@
<script> <script>
import scEcharts from "@/components/scEcharts"; import scEcharts from "@/components/scEcharts";
import { defineAsyncComponent } from "vue"; import { defineAsyncComponent } from "vue";
const colors = ["#647bfe", "#cbd3fe", "#91CC75", "#EE6666", "#CC00CC", "#551e13"]; const colors = ["#5b9bd5", "#ffc000", "#ed7d31", "#cb9bff", "#4472c4", "#91d024"];
let tooltip = { let tooltip = {
show: true, show: true,
trigger: "axis", trigger: "axis",
@ -268,13 +268,24 @@ let grid = {
top: "20%", top: "20%",
}; };
let toolbox = { let toolbox = {
right: "5%", right: 0,
feature: { feature: {
dataView: { show: true, readOnly: false }, dataView: { show: true, readOnly: false },
saveAsImage: { show: true }, saveAsImage: { show: true },
}, },
orient: "vertical",
}; };
let legend = { let legend = {
selector: [
{
type: 'all',
title: '全选'
},
{
type: 'inverse',
title: '反选'
}
],
top: "2%", top: "2%",
data: ["总产量", "分布电耗", "总电量", "成本", "消耗", "进厂"], data: ["总产量", "分布电耗", "总电量", "成本", "消耗", "进厂"],
}; };
@ -284,7 +295,7 @@ let yAxis = [
name: "总产量 (t)", name: "总产量 (t)",
position: "left", position: "left",
alignTicks: true, alignTicks: true,
nameRotate: 45, nameRotate: 50,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -297,7 +308,7 @@ let yAxis = [
}, },
{ {
type: "value", type: "value",
nameRotate: 45, nameRotate: 50,
name: "分布电耗(kW·h/t)", name: "分布电耗(kW·h/t)",
position: "left", position: "left",
alignTicks: true, alignTicks: true,
@ -314,7 +325,7 @@ let yAxis = [
}, },
{ {
type: "value", type: "value",
nameRotate: 45, nameRotate: 50,
name: "总电量(kW·h)", name: "总电量(kW·h)",
position: "left", position: "left",
alignTicks: true, alignTicks: true,
@ -332,7 +343,7 @@ let yAxis = [
{ {
type: "value", type: "value",
nameRotate: 45, nameRotate: 50,
name: "成本(元/t)", name: "成本(元/t)",
position: "right", position: "right",
alignTicks: true, alignTicks: true,
@ -351,7 +362,7 @@ let yAxis = [
name: "消耗(t)", name: "消耗(t)",
position: "right", position: "right",
alignTicks: true, alignTicks: true,
nameRotate: 45, nameRotate: 50,
offset: 50, offset: 50,
axisLine: { axisLine: {
show: true, show: true,
@ -368,7 +379,7 @@ let yAxis = [
name: "进厂(t)", name: "进厂(t)",
position: "right", position: "right",
alignTicks: true, alignTicks: true,
nameRotate: 45, nameRotate: 50,
offset: 100, offset: 100,
axisLine: { axisLine: {
show: true, show: true,