mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

修改bug

Browse Source
This commit is contained in:
‘937886381’
2024-03-27 17:02:44 +08:00
parent f025a2b77b
commit 53526b5f78
9 changed files with 434 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/views/OperationalOverview/components/doubleYChart .vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-03-26 16:16:50
* @LastEditTime: 2024-03-27 14:37:35
* @LastEditors: zhp
* @Description:
-->
@@ -147,72 +147,40 @@ export default {
]
// const colors = ['#5470C6', '#91CC75', '#EE6666']
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
// color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: { top: 90, right: 60, bottom: 20, left: 90 },
legend: {
itemWidth: 10,
itemHeight: 10,
top: '0%',
right: '20px',
data: ['产线产量', '产线良品率'],
textStyle: {
fontSize: 12 * this.beilv,
color: '#ced1d5'
}
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#25528f',
width: '1' // 坐标线的宽度
if (!nameList && !passRateList && !outputNumList) {
// 隐藏echarts图表
this.chart.clear(); // 清空图表
this.chart.setOption({ // 设置空的option
title: {
show: false
},
series: []
});
} else {
// 显示echarts图表
this.chart.setOption({
// color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
axisLabel: {
color: "#fff",
fontSize: 12,
// formatter: '{value}'
// textStyle: {
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
// }
},
splitLine: {
lineStyle: {
color: '#25528f'
grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true },
legend: {
itemWidth: 10,
itemHeight: 10,
top: '0%',
right: '20px',
data: ['产线产量', '产线良品率'],
textStyle: {
fontSize: 12 * this.beilv,
color: '#ced1d5'
}
},
data: nameList
},
// yAxis: {
// },
yAxis: [
{
// min: function() { // 取最小值向下取整为最小刻度
// return 0
// },
// max: function(value) { // 取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
scale: true,
type: 'value',
name: '良品率/%',
nameTextStyle: {// y轴上方单位的颜色
color: '#fff',
align: "left",
},
position: 'right',
alignTicks: true,
xAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#25528f',
@@ -223,72 +191,118 @@ export default {
color: "#fff",
fontSize: 12,
// formatter: '{value}'
formatter: '{value}%'
// }
},
splitLine: {
lineStyle: {
color: '#25528f'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// },
},
{
// min: function() { // 取最小值向下取整为最小刻度
// return 0
// },
// max: function(value) { // 取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
scale: true,
type: 'value',
name: '产量/片', // y轴上方的单位
nameTextStyle: {
color: "#fff",
// fontSize: 10,
align: "right",
},
// position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#25528f', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
// textStyle: {
// color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
color: "#fff",
fontSize: 12,
// formatter: '{value}'
formatter: '{value} 片'
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
// }
},
splitLine: {
lineStyle: {
color: '#25528f'
}
},
data: nameList
},
// yAxis: {
// },
yAxis: [
{
// min: function() { // 取最小值向下取整为最小刻度
// return 0
// },
// max: function(value) { // 取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
scale: true,
type: 'value',
name: '良品率/%',
nameTextStyle: {// y轴上方单位的颜色
color: '#fff',
align: "left",
},
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
// type: 'solid',
color: '#25528f',
// width: '1' // 坐标线的宽度
}
},
axisLabel: {
color: "#fff",
fontSize: 12,
// formatter: '{value}'
formatter: '{value}%'
// }
},
splitLine: {
lineStyle: {
color: '#25528f'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// },
},
{
// min: function() { // 取最小值向下取整为最小刻度
// return 0
// },
// max: function(value) { // 取最大值向上取整为最大刻度
// return Math.ceil(value.max)
// },
scale: true,
type: 'value',
name: '产量/片', // y轴上方的单位
nameTextStyle: {
color: "#fff",
// fontSize: 10,
align: "right",
},
// position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
// type: 'solid',
color: '#25528f', // 左边线的颜色
// width: '1' // 坐标线的宽度
}
},
axisLabel: {
// textStyle: {
// color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
color: "#fff",
// show: true,
lineStyle: {
color: "#25528f",
},
// }
},
splitLine: {
lineStyle: {
color: '#25528f'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[1]
// }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
// },
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[1]
// }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
// },
}
],
series: series
})
],
series: series
})
}
}
}
}

173
src/views/OperationalOverview/components/linearBarChart.vue
View File

@@ -87,8 +87,17 @@ export default {
// console.log('1111', dataList);
// console.log(1)
this.chart = echarts.init(document.getElementById(this.id))
// if (dataList.length !== 0) {
// this.$set(this.series, "data", dataList);
if (!nameList && !dataList) {
// 隐藏echarts图表
this.chart.clear(); // 清空图表
this.chart.setOption({ // 设置空的option
title: {
show: false
},
series: []
});
} else {
// 显示echarts图表
this.series = [{
type: 'bar',
data: dataList,
@@ -111,90 +120,94 @@ export default {
},
barWidth: 12,
}]
// }
// if (nameList.length !== 0) {
// }
// if (nameList.length !== 0) {
this.nameList = nameList
// }
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: { top: 90, right: 60, bottom: 20, left: 90 },
// legend: {
// itemWidth: 10,
// itemHeight: 10,
// // right: '20px',
// data: nameList,
// textStyle: {
// fontSize: 12 * this.beilv,
// color: '#ced1d5'
// }
// },
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#25528f', // 左边线的颜色
width: '1' // 坐标线的宽度
// }
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
axisLabel: {
color: "#fff",
fontSize: 12,
// formatter: '{value}'
grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true },
// legend: {
// itemWidth: 10,
// itemHeight: 10,
// // right: '20px',
// data: nameList,
// textStyle: {
// fontSize: 12 * this.beilv,
// color: '#ced1d5'
// }
// },
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#25528f', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
color: "#fff",
fontSize: 12,
// formatter: '{value}'
},
splitLine: {
lineStyle: {
color: '#25528f'
}
},
data: this.nameList
},
splitLine: {
lineStyle: {
color: '#25528f'
yAxis: {
name: '单位kwh',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: "#fff",
fontSize: 12,
// formatter: '{value}/kwh'
},
axisLine: {
show: true,
lineStyle: {
color: "#25528f",
},
},
splitLine: {
lineStyle: {
color: "#25528f",
},
}
},
data: this.nameList
},
yAxis: {
name: '单位kwh',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: "#fff",
fontSize: 12,
// formatter: '{value}/kwh'
},
axisLine: {
show: true,
lineStyle: {
color: "#25528f",
},
},
splitLine: {
lineStyle: {
color: "#25528f",
},
}
},
// legend: {
// itemHeight: 10,
// itemWidth: 10,
// x: 'center', // 可设定图例在左、右、居中
// y: 'top', // 可设定图例在上、下、居中
// show: this.showLegend,
// data: this.dataList,
// right: '1%',
// textStyle: {
// fontSize: 12 * this.beilv,
// color: '#ced1d5'
// }
// },
series: this.series
})
// legend: {
// itemHeight: 10,
// itemWidth: 10,
// x: 'center', // 可设定图例在左、右、居中
// y: 'top', // 可设定图例在上、下、居中
// show: this.showLegend,
// data: this.dataList,
// right: '1%',
// textStyle: {
// fontSize: 12 * this.beilv,
// color: '#ced1d5'
// }
// },
series: this.series
})
}
// if (dataList.length !== 0) {
// this.$set(this.series, "data", dataList);
}
}
}

26
src/views/OperationalOverview/components/pileBarChart.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-12-27 13:54:52
* @LastEditTime: 2024-03-26 10:50:30
* @LastEditTime: 2024-03-27 16:50:04
* @LastEditors: zhp
* @Description:
-->
@@ -42,7 +42,7 @@ export default {
},
height: {
type: Number,
default: 200
default: 100
},
showLegend: {
type: Boolean,
@@ -127,23 +127,31 @@ export default {
) : []
};
});
// this.charts.resize({
// //width: width,
// //height: height,
// // es6解构
// width,
// height
// })
this.chart.setOption({
legend: {
itemWidth: 12,
itemHeight: 12,
top:'10',
bottom: '20',
left: '20',
icon: 'rect',
textStyle: {
color: '#ffffff'
}
},
grid: {
top:'80',
top:'0',
left: '3%',
right: '4%',
// bottom: '3%',
width: 'auto',
height: '300',
height: '95',
containLabel: true
},
yAxis: [
@@ -170,7 +178,7 @@ export default {
verticalAlign: 'bottom',
fontSize: 12,
align: 'left',
padding: [0, 0, 15, -5]
padding: [0, 0, 10, -5]
}
},
data: topNameList
@@ -198,7 +206,7 @@ export default {
verticalAlign: 'bottom',
fontSize: 12,
align: 'right',
padding: [0, 0, 15, -5]
padding: [0, 0, 10, -5]
}
},
data: nameWasteList
@@ -210,6 +218,10 @@ export default {
},
series:series
})
this.chart.resize({
width: 'auto',
height: 90
});;
}
}
}