@@ -48,7 +48,7 @@ | |||
> | |||
<new-bar | |||
chart-name="realtime-cost-production" | |||
:name-list="['A', 'B', 'C', 'D', 'E', 'F']" | |||
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']" | |||
:data-list="[ | |||
{ | |||
topColor: 'rgba(59, 76, 118, 0.2)', | |||
@@ -70,18 +70,30 @@ | |||
<div class="grow"> | |||
<techy-box class="" style="padding: calc(16px * var(--beilv));"> | |||
<techy-analysis-header>产线缺陷月对比</techy-analysis-header> | |||
<new-bar | |||
chart-name="process-fault" | |||
:name-list="['A', 'B', 'C', 'D', 'E', 'F']" | |||
:data-list="[ | |||
{ | |||
topColor: 'rgba(59, 76, 118, 0.2)', | |||
bottomColor: '#49FBD6', | |||
name: '库存', | |||
data: [64, 91, 55, 65, 37, 77] | |||
} | |||
]" | |||
/> | |||
<div | |||
class="absolute top-0 left-0" | |||
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" | |||
> | |||
<new-bar | |||
chart-name="realtime-cost-production" | |||
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']" | |||
unit-name="单位: 千片" | |||
:data-list="[ | |||
{ | |||
topColor: 'rgba(59, 76, 118, 0.2)', | |||
bottomColor: '#49FBD6', | |||
name: '产线A', | |||
data: [3.3, 1.2, 4.5, 5.8, 2.1, 2] | |||
}, | |||
{ | |||
topColor: 'rgba(59, 76, 118, 0.2)', | |||
bottomColor: '#31A2FF', | |||
name: '产线B', | |||
data: [4.3, 2.2, 3.5, 5.9, 2.3, 3] | |||
} | |||
]" | |||
/> | |||
</div> | |||
</techy-box> | |||
</div> | |||
</div> | |||
@@ -125,12 +125,12 @@ export default { | |||
} | |||
}, | |||
legend: { | |||
top: '10%', | |||
top: '12%', | |||
bottom: 0, | |||
left: 0, | |||
orient: 'vertical', | |||
icon: 'none', | |||
itemGap: 5, | |||
itemGap: 8, | |||
itemWidth: 10, | |||
formatter: name => { | |||
const testData = this.dataList | |||
@@ -15,6 +15,10 @@ export default { | |||
name: 'OverviewBar', | |||
mixins: [resize], | |||
props: { | |||
unitName: { | |||
type: String, | |||
default: '单位: 片' | |||
}, | |||
chartName: { | |||
type: String, | |||
default: '' | |||
@@ -176,15 +180,8 @@ export default { | |||
{ offset: 0, color: this.dataList[0].topColor }, | |||
{ offset: 1, color: this.dataList[0].bottomColor } | |||
]) | |||
// borderWidth: 1, | |||
// borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度 | |||
}, | |||
data: this.dataList[0].data | |||
// backgroundStyle: { | |||
// // borderColor: this.dataList[0].bottomColor, | |||
// borderColor: '#ff0000', | |||
// borderWidth: 1 | |||
// } | |||
}, | |||
{ | |||
// 柱顶 | |||
@@ -255,6 +252,7 @@ export default { | |||
legend: { | |||
itemWidth: 8, | |||
itemHeight: 8, | |||
selectedMode: false, | |||
top: '7%', | |||
right: '2%', | |||
textStyle: { | |||
@@ -282,7 +280,7 @@ export default { | |||
}, | |||
yAxis: [ | |||
{ | |||
name: '单位:片', | |||
name: this.unitName, // '单位: 片', | |||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, | |||
type: 'value', | |||
splitNumber: 3, | |||