mt-fe-group/11-mes-new
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 产品成品率

Browse Source
This commit is contained in:
lb
2022-11-24 10:28:11 +08:00
parent 539235fcfb
commit f37dfbb328
3 changed files with 389 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

568
src/views/QualityManager/components/charts/newLineStack.vue
View File

@@ -6,6 +6,230 @@
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
class ChartOption {
constructor() {
this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
// this.legend = {
// top: 11,
// right: 32,
// itemWidth: 8,
// itemHeight: 8,
// textStyle: {
// color: '#fff9',
// fontSize: 10
// }
// }
this.grid = {
top: 64,
left: 12,
right: 28,
bottom: 20,
containLabel: true
}
this.tooltip = {
trigger: 'axis',
extraCssText: 'width: 180px !important; ',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
}
this.xAxis = {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#fff3'
}
},
axisTick: { show: false },
axisLabel: {
textStyle: {
fontSize: 12,
color: '#fff8' //
},
margin: 12
},
data:
this.mode === 'month'
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
this.yAxis = [
{
name: '成品率 ',
type: 'value',
min: 'dataMin',
splitNumber: 4,
nameTextStyle: {
color: 'rgba(255,255,255,0.7)',
fontSize: 12,
align: 'left',
verticalAlign: 'bottom'
},
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value} %',
textStyle: {
fontSize: 12,
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
splitLine: {
lineStyle: {
type: 'dotted',
color: 'rgba(119, 255, 242, 0.2)'
}
}
}
]
this.series = [
{
name: 'A1下片机',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#DDB11266' // 0% 处的颜色
},
{
offset: 1,
color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
emphasis: {
focus: 'series'
},
data:
this.mode === 'month'
? Array(30)
.fill(1)
.map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
: [11, 199, 140, 63, 185, 5, 78].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
},
{
name: '磨边机',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#1A99FFCC' // 0% 处的颜色
},
{
offset: 1,
color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
emphasis: {
focus: 'series'
},
data:
this.mode === 'month'
? Array(30)
.fill(1)
.map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
: [11, 199, 140, 63, 185, 5, 78].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
}
]
}
get option() {
return this
}
optionFilter(option, calcSize = () => {} /** callback */) {
let newOption
if (Array.isArray(option)) {
newOption = []
option.forEach(item => {
newOption.push(this.optionFilter(item, calcSize))
})
return newOption
} else if (typeof option === 'object') {
newOption = {}
for (const key in option) {
if (key === 'colorStops') newOption[key] = option[key]
else if (
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
) {
newOption[key] = calcSize(option[key])
} else newOption[key] = this.optionFilter(option[key], calcSize)
}
return newOption
} else {
newOption = calcSize(option)
return option
}
}
}
export default {
name: 'PlFaultAnalysisPieChart',
mixins: [resize],
@@ -23,329 +247,7 @@ export default {
data() {
return {
chart: null,
configs: {
color: ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6'],
tooltip: {
trigger: 'axis',
extraCssText: 'width: 180px !important; ',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: 56,
left: '2%',
right: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#ffffff66'
}
},
axisTick: { show: false },
axisLabel: {
textStyle: {
fontSize: 10,
color: '#fff8' //
},
margin: 12
},
data:
this.mode === 'month'
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: [
{
name: '成品率 ',
type: 'value',
min: 'dataMin',
splitNumber: 4,
nameTextStyle: {
color: 'rgba(255,255,255,0.7)',
fontSize: 10,
align: 'left',
verticalAlign: 'bottom'
},
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value} %',
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
splitLine: {
lineStyle: {
type: 'dotted',
color: 'rgba(119, 255, 242, 0.2)'
}
}
}
],
series: [
{
name: 'A1下片机',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FB418C66' // 0% 处的颜色
},
{
offset: 1,
color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
emphasis: {
focus: 'series'
},
data:
this.mode === 'month'
? Array(30)
.fill(1)
.map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
: [11, 199, 140, 63, 185, 5, 78].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
},
{
name: '磨边机',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#DDB11266' // 0% 处的颜色
},
{
offset: 1,
color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
emphasis: {
focus: 'series'
},
data:
this.mode === 'month'
? Array(30)
.fill(1)
.map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
: [11, 199, 140, 63, 185, 5, 78].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
}
// {
// name: '镀膜机',
// type: 'line',
// symbol: 'none',
// areaStyle: {
// // color: 'rgba(50,145,152,0.5)'
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '#1A99FF66' // 0% 处的颜色
// },
// {
// offset: 1,
// color: 'transparent' // 100% 处的颜色
// }
// ],
// global: false // 缺省为 false
// }
// },
// emphasis: {
// focus: 'series'
// },
// data:
// this.mode === 'month'
// ? Array(30)
// .fill(1)
// .map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// : [11, 199, 140, 63, 185, 5, 78].map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// },
// {
// name: '包装纸',
// type: 'line',
// symbol: 'none',
// areaStyle: {
// // color: 'rgba(50,145,152,0.5)'
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '#A691FF66' // 0% 处的颜色
// },
// {
// offset: 1,
// color: 'transparent' // 100% 处的颜色
// }
// ],
// global: false // 缺省为 false
// }
// },
// emphasis: {
// focus: 'series'
// },
// data:
// this.mode === 'month'
// ? Array(30)
// .fill(1)
// .map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// : [11, 199, 140, 63, 185, 5, 78].map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// },
// {
// name: '丝印',
// type: 'line',
// symbol: 'none',
// label: {
// show: true,
// position: 'top'
// },
// areaStyle: {
// // color: 'rgba(50,145,152,0.5)'
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '#49FBD666' // 0% 处的颜色
// },
// {
// offset: 1,
// color: 'transparent' // 100% 处的颜色
// }
// ],
// global: false // 缺省为 false
// }
// },
// emphasis: {
// focus: 'series'
// },
// data:
// this.mode === 'month'
// ? Array(30)
// .fill(1)
// .map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// : [11, 199, 140, 63, 185, 5, 78].map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// }
]
}
configs: null
}
},
@@ -356,18 +258,9 @@ export default {
},
mounted() {
window.addEventListener('resize', function() {
if (this.chart) {
this.chart.resize()
}
})
this.$nextTick(() => {
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption(this.configs)
this.chart.resize()
this.setChartOption()
})
},
methods: {
@@ -401,6 +294,15 @@ export default {
})
if (this.chart) this.chart.setOption(this.configs)
},
calcSize(num) {
const beilv = document.documentElement.style.getPropertyValue('--beilv')
return num * beilv
},
setChartOption() {
let chartOption = new ChartOption()
this.configs = chartOption.optionFilter(chartOption.option, this.calcSize)
this.chart.setOption(this.configs)
}
}
}