lb #12
@ -41,39 +41,35 @@
|
|||||||
<div class="grow-8 flex gap-16">
|
<div class="grow-8 flex gap-16">
|
||||||
<div class="grow">
|
<div class="grow">
|
||||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
<techy-analysis-header>缺陷分类分析</techy-analysis-header>
|
<techy-analysis-header>产线缺陷日对比</techy-analysis-header>
|
||||||
<new-bar
|
<div
|
||||||
:xlabel-font-size="10"
|
class="absolute top-0 left-0"
|
||||||
:xlabel-rotate="30"
|
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
|
||||||
:name-list="[
|
>
|
||||||
'擦划伤1',
|
<new-bar
|
||||||
'擦划伤2',
|
chart-name="realtime-cost-production"
|
||||||
'擦划伤3',
|
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
|
||||||
'擦划伤4',
|
:data-list="[
|
||||||
'擦划伤5',
|
{
|
||||||
'擦划伤6',
|
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||||
'擦划伤7',
|
bottomColor: '#49FBD6',
|
||||||
'擦划伤8',
|
name: '产线A',
|
||||||
'擦划伤9',
|
data: [64, 91, 55, 65, 37, 79]
|
||||||
'擦划伤0',
|
},
|
||||||
'擦划伤11',
|
{
|
||||||
'擦划伤12'
|
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||||
]"
|
bottomColor: '#31A2FF',
|
||||||
chart-name="fault-category"
|
name: '产线B',
|
||||||
:data-list="[
|
data: [66, 79, 65, 54, 37, 77]
|
||||||
{
|
}
|
||||||
topColor: 'rgba(59, 76, 118, 0.2)',
|
]"
|
||||||
bottomColor: '#31A2FF',
|
/>
|
||||||
name: '库存',
|
</div>
|
||||||
data: [32, 65, 65, 54, 40, 60, 64, 91, 55, 65, 37, 77]
|
|
||||||
}
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
</techy-box>
|
</techy-box>
|
||||||
</div>
|
</div>
|
||||||
<div class="grow">
|
<div class="grow">
|
||||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
<techy-analysis-header>工序缺陷分析</techy-analysis-header>
|
<techy-analysis-header>产线缺陷月对比</techy-analysis-header>
|
||||||
<new-bar
|
<new-bar
|
||||||
chart-name="process-fault"
|
chart-name="process-fault"
|
||||||
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
|
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
ref="chartContainer"
|
ref="chartContainer"
|
||||||
class="chartContainer"
|
class="chartContainer"
|
||||||
:class="bindClass"
|
:class="bindClass"
|
||||||
style="position: relative; width: 100%; height: calc(100% - 36px)"
|
style="position: relative; width: 100%; height:100%"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -46,19 +46,19 @@ export default {
|
|||||||
bindClass() {
|
bindClass() {
|
||||||
return {
|
return {
|
||||||
'fault-category-chart': this.chartName === 'fault-category',
|
'fault-category-chart': this.chartName === 'fault-category',
|
||||||
'process-fault-chart': this.chartName === 'process-fault'
|
'process-fault-chart': this.chartName === 'process-fault',
|
||||||
|
'realtime-production-cost-chart': this.chartName === 'realtime-cost-production'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (this.dataList.length > 1) {
|
if (this.dataList.length > 1) {
|
||||||
const barWidth = 400 / 2 / this.dataList[0].data.length
|
|
||||||
this.series = [
|
this.series = [
|
||||||
{
|
{
|
||||||
// 柱体
|
// 柱体
|
||||||
name: this.dataList[0].name,
|
name: this.dataList[0].name,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth,
|
barWidth: 20,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: this.dataList[0].topColor },
|
{ offset: 0, color: this.dataList[0].topColor },
|
||||||
@ -71,23 +71,40 @@ export default {
|
|||||||
// 柱顶
|
// 柱顶
|
||||||
name: this.dataList[0].name,
|
name: this.dataList[0].name,
|
||||||
type: 'pictorialBar',
|
type: 'pictorialBar',
|
||||||
barWidth,
|
barWidth: 20,
|
||||||
symbol: 'diamond',
|
symbol: 'circle',
|
||||||
symbolPosition: 'end',
|
symbolPosition: 'end',
|
||||||
symbolOffset: [0, '-50%'],
|
symbolOffset: ['-70%', '-50%'],
|
||||||
symbolSize: [30, 12],
|
symbolSize: [20, 6],
|
||||||
zlevel: 2,
|
zlevel: 2,
|
||||||
itemStyle: { color: this.dataList[0].topColor },
|
itemStyle: {
|
||||||
data: this.dataList[0].data
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
|
||||||
|
{ offset: 1, color: '#2c6e7d' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
data: this.dataList[0].data,
|
||||||
|
label: {
|
||||||
|
color:
|
||||||
|
this.chartName === 'process-fault'
|
||||||
|
? 'rgba(119, 255, 242, 1)'
|
||||||
|
: this.chartName === 'fault-category'
|
||||||
|
? '#31a2ff'
|
||||||
|
: '#fff9',
|
||||||
|
show: true,
|
||||||
|
offset: [-12, 10],
|
||||||
|
position: 'top',
|
||||||
|
vertialAlign: 'bottom'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// 柱底
|
// 柱底
|
||||||
name: this.dataList[0].name,
|
name: this.dataList[0].name,
|
||||||
type: 'pictorialBar',
|
type: 'pictorialBar',
|
||||||
barWidth,
|
barWidth: 20,
|
||||||
symbol: 'diamond',
|
symbol: 'circle',
|
||||||
symbolOffset: [0, '50%'],
|
symbolOffset: ['-62%', '50%'],
|
||||||
symbolSize: [30, 15],
|
symbolSize: [20, 6],
|
||||||
itemStyle: { color: this.dataList[0].bottomColor },
|
itemStyle: { color: this.dataList[0].bottomColor },
|
||||||
data: this.dataList[0].data
|
data: this.dataList[0].data
|
||||||
},
|
},
|
||||||
@ -95,7 +112,7 @@ export default {
|
|||||||
// 柱体
|
// 柱体
|
||||||
name: this.dataList[1].name,
|
name: this.dataList[1].name,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth,
|
barWidth: 20,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: this.dataList[1].topColor },
|
{ offset: 0, color: this.dataList[1].topColor },
|
||||||
@ -108,35 +125,51 @@ export default {
|
|||||||
// 柱顶
|
// 柱顶
|
||||||
name: this.dataList[1].name,
|
name: this.dataList[1].name,
|
||||||
type: 'pictorialBar',
|
type: 'pictorialBar',
|
||||||
barWidth,
|
barWidth: 20,
|
||||||
symbol: 'diamond',
|
symbol: 'circle',
|
||||||
symbolPosition: 'end',
|
symbolPosition: 'end',
|
||||||
symbolOffset: [0, '-50%'],
|
symbolOffset: ['66%', '-50%'],
|
||||||
symbolSize: [30, 12],
|
symbolSize: [20, 6],
|
||||||
zlevel: 2,
|
zlevel: 2,
|
||||||
itemStyle: { color: this.dataList[1].topColor },
|
itemStyle: {
|
||||||
data: this.dataList[1].data
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[1].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[1].bottomColor }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
data: this.dataList[1].data,
|
||||||
|
label: {
|
||||||
|
color:
|
||||||
|
this.chartName === 'process-fault'
|
||||||
|
? 'rgba(119, 255, 242, 1)'
|
||||||
|
: this.chartName === 'fault-category'
|
||||||
|
? '#31a2ff'
|
||||||
|
: '#fff9',
|
||||||
|
show: true,
|
||||||
|
offset: [12, 10],
|
||||||
|
position: 'top',
|
||||||
|
vertialAlign: 'bottom'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// 柱底
|
// 柱底
|
||||||
name: this.dataList[1].name,
|
name: this.dataList[1].name,
|
||||||
type: 'pictorialBar',
|
type: 'pictorialBar',
|
||||||
barWidth,
|
barWidth: 20,
|
||||||
symbol: 'diamond',
|
symbol: 'circle',
|
||||||
symbolOffset: [0, '50%'],
|
symbolOffset: ['66%', '50%'],
|
||||||
symbolSize: [30, 15],
|
symbolSize: [20, 6],
|
||||||
itemStyle: { color: this.dataList[1].topColor },
|
itemStyle: { color: this.dataList[1].bottomColor },
|
||||||
data: this.dataList[1].data
|
data: this.dataList[1].data
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
} else {
|
} else {
|
||||||
const barWidth = 320 / 2 / this.dataList[0].data.length
|
const barWidth = 400 / 2 / this.dataList[0].data.length
|
||||||
this.series = [
|
this.series = [
|
||||||
{
|
{
|
||||||
// 柱体
|
// 柱体
|
||||||
name: this.dataList[0].name,
|
name: this.dataList[0].name,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
// barWidth: 26,
|
|
||||||
barWidth: barWidth,
|
barWidth: barWidth,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
@ -157,7 +190,6 @@ export default {
|
|||||||
// 柱顶
|
// 柱顶
|
||||||
name: this.dataList[0].name,
|
name: this.dataList[0].name,
|
||||||
type: 'pictorialBar',
|
type: 'pictorialBar',
|
||||||
// barWidth: 26,
|
|
||||||
barWidth: barWidth,
|
barWidth: barWidth,
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
symbolPosition: 'end',
|
symbolPosition: 'end',
|
||||||
@ -167,11 +199,16 @@ export default {
|
|||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
|
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
|
||||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
{ offset: 1, color: '#2c6e7d' }
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
color: this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : '#31a2ff',
|
color:
|
||||||
|
this.chartName === 'process-fault'
|
||||||
|
? 'rgba(119, 255, 242, 1)'
|
||||||
|
: this.chartName === 'fault-category'
|
||||||
|
? '#31a2ff'
|
||||||
|
: '#fff9',
|
||||||
show: true,
|
show: true,
|
||||||
offset: [0, 10],
|
offset: [0, 10],
|
||||||
position: 'top',
|
position: 'top',
|
||||||
@ -183,12 +220,11 @@ export default {
|
|||||||
// 柱底
|
// 柱底
|
||||||
name: this.dataList[0].name,
|
name: this.dataList[0].name,
|
||||||
type: 'pictorialBar',
|
type: 'pictorialBar',
|
||||||
// barWidth: 26,
|
|
||||||
barWidth: barWidth,
|
barWidth: barWidth,
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
symbolOffset: [0, '50%'],
|
symbolOffset: [0, '50%'],
|
||||||
symbolSize: [barWidth, 6],
|
symbolSize: [barWidth, 6],
|
||||||
itemStyle: { color: this.dataList[0].bottomColor + '9f' },
|
itemStyle: { color: '#2c6e7d' },
|
||||||
data: this.dataList[0].data
|
data: this.dataList[0].data
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -210,12 +246,22 @@ export default {
|
|||||||
this.chart = echarts.init(this.$refs.chartContainer)
|
this.chart = echarts.init(this.$refs.chartContainer)
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
grid: {
|
grid: {
|
||||||
top: 10,
|
top: '24%',
|
||||||
left: '2%',
|
left: '8%',
|
||||||
right: '2%',
|
right: '5%',
|
||||||
bottom: '3%',
|
bottom: '5%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
|
legend: {
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
top: '7%',
|
||||||
|
right: '2%',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
axisLine: {
|
axisLine: {
|
||||||
@ -225,40 +271,77 @@ export default {
|
|||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
margin: 16,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: this.xlabelFontSize,
|
fontSize: this.xlabelFontSize,
|
||||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||||
},
|
},
|
||||||
margin: 20,
|
|
||||||
rotate: this.xlabelRotate
|
rotate: this.xlabelRotate
|
||||||
},
|
},
|
||||||
data: this.nameList
|
data: this.nameList
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: [
|
||||||
axisLine: {
|
{
|
||||||
lineStyle: {
|
name: '单位:片',
|
||||||
type: 'solid',
|
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
||||||
color: this.dataList[0].bottomColor,
|
type: 'value',
|
||||||
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
splitNumber: 3,
|
||||||
width: '1' // 坐标线的宽度
|
axisTick: { show: false },
|
||||||
}
|
onZero: true,
|
||||||
},
|
position: 'left',
|
||||||
axisTick: {
|
offset: 10,
|
||||||
show: false
|
axisLine: {
|
||||||
},
|
lineStyle: {
|
||||||
axisLabel: {
|
type: 'solid',
|
||||||
textStyle: {
|
color: this.dataList[0].bottomColor,
|
||||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||||
}
|
width: '1' // 坐标线的宽度
|
||||||
},
|
}
|
||||||
splitLine: {
|
},
|
||||||
lineStyle: {
|
axisLabel: {
|
||||||
type: 'dotted',
|
textStyle: {
|
||||||
color: 'rgba(119, 255, 242, 0.2)'
|
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
type: 'value'
|
splitLine: {
|
||||||
},
|
lineStyle: {
|
||||||
|
type: 'dotted',
|
||||||
|
color: 'rgba(119, 255, 242, 0.2)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// name: '能耗kw/h',
|
||||||
|
// nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
||||||
|
// type: 'value',
|
||||||
|
// splitNumber: 3,
|
||||||
|
// axisTick: { show: false },
|
||||||
|
// onZero: true,
|
||||||
|
// position: 'left',
|
||||||
|
// offset: 48,
|
||||||
|
// axisLine: {
|
||||||
|
// lineStyle: {
|
||||||
|
// type: 'solid',
|
||||||
|
// color: this.dataList[1].bottomColor,
|
||||||
|
// width: '1' // 坐标线的宽度
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// axisLabel: {
|
||||||
|
// textStyle: {
|
||||||
|
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// splitLine: {
|
||||||
|
// show: false
|
||||||
|
// // lineStyle: {
|
||||||
|
// // type: 'dotted',
|
||||||
|
// // color: 'rgba(119, 255, 242, 0.2)'
|
||||||
|
// // }
|
||||||
|
// },
|
||||||
|
// type: 'value'
|
||||||
|
// }
|
||||||
|
],
|
||||||
series: this.series
|
series: this.series
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -276,27 +359,40 @@ export default {
|
|||||||
/* .fault-category-chart::before { */
|
/* .fault-category-chart::before { */
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: calc(36px * var(--beilv));
|
/* bottom: calc(100vh/1920 * 80);
|
||||||
/* top: 63%; */
|
left: calc(100vw/1920 * 48); */
|
||||||
|
/* bottom: calc(10% + 100vh/1920 * 28); */
|
||||||
|
bottom: 25px;
|
||||||
left: 9%;
|
left: 9%;
|
||||||
height: calc(32px * var(--beilv));
|
height: 52px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
background: linear-gradient(to top, #31a2ff6d, transparent);
|
background: linear-gradient(to top, #31a2ff6d, transparent);
|
||||||
transform: skew(-35deg);
|
transform: skew(-45deg);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
.process-fault-chart >>> div::before {
|
.process-fault-chart >>> div::before {
|
||||||
/* .process-fault-chart::before { */
|
/* .process-fault-chart::before { */
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 65%;
|
bottom: 26px;
|
||||||
left: 8%;
|
left: 10%;
|
||||||
height: calc(32px * var(--beilv));
|
height: 48px;
|
||||||
/* bottom: calc(20px * var(--beilv));
|
|
||||||
left: calc(36px * var(--beilv));
|
|
||||||
height: calc(32px * var(--beilv)); */
|
|
||||||
width: 90%;
|
width: 90%;
|
||||||
background: linear-gradient(to top, #49fbd789, transparent);
|
background: linear-gradient(to top, #49fbd789, transparent);
|
||||||
|
transform: skew(-45deg);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.realtime-production-cost-chart >>> div::before {
|
||||||
|
/* .fault-category-chart::before { */
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 12%;
|
||||||
|
left: 6%;
|
||||||
|
height: 30px;
|
||||||
|
width: 90%;
|
||||||
|
border-radius: 3px;
|
||||||
|
/* border: 1px solid #49fbd7; */
|
||||||
|
background: linear-gradient(to top, #49fbd789 5%, transparent);
|
||||||
transform: skew(-35deg);
|
transform: skew(-35deg);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
@ -31,7 +31,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: '15%',
|
top: '18%',
|
||||||
left: '2%',
|
left: '2%',
|
||||||
right: '2%',
|
right: '2%',
|
||||||
bottom: '2%',
|
bottom: '2%',
|
||||||
|
Loading…
Reference in New Issue
Block a user