@@ -48,7 +48,7 @@ | |||||
> | > | ||||
<new-bar | <new-bar | ||||
chart-name="realtime-cost-production" | chart-name="realtime-cost-production" | ||||
:name-list="['A', 'B', 'C', 'D', 'E', 'F']" | |||||
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']" | |||||
:data-list="[ | :data-list="[ | ||||
{ | { | ||||
topColor: 'rgba(59, 76, 118, 0.2)', | topColor: 'rgba(59, 76, 118, 0.2)', | ||||
@@ -70,18 +70,30 @@ | |||||
<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 | |||||
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> | </techy-box> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -125,12 +125,12 @@ export default { | |||||
} | } | ||||
}, | }, | ||||
legend: { | legend: { | ||||
top: '10%', | |||||
top: '12%', | |||||
bottom: 0, | bottom: 0, | ||||
left: 0, | left: 0, | ||||
orient: 'vertical', | orient: 'vertical', | ||||
icon: 'none', | icon: 'none', | ||||
itemGap: 5, | |||||
itemGap: 8, | |||||
itemWidth: 10, | itemWidth: 10, | ||||
formatter: name => { | formatter: name => { | ||||
const testData = this.dataList | const testData = this.dataList | ||||
@@ -15,6 +15,10 @@ export default { | |||||
name: 'OverviewBar', | name: 'OverviewBar', | ||||
mixins: [resize], | mixins: [resize], | ||||
props: { | props: { | ||||
unitName: { | |||||
type: String, | |||||
default: '单位: 片' | |||||
}, | |||||
chartName: { | chartName: { | ||||
type: String, | type: String, | ||||
default: '' | default: '' | ||||
@@ -176,15 +180,8 @@ export default { | |||||
{ offset: 0, color: this.dataList[0].topColor }, | { offset: 0, color: this.dataList[0].topColor }, | ||||
{ offset: 1, color: this.dataList[0].bottomColor } | { offset: 1, color: this.dataList[0].bottomColor } | ||||
]) | ]) | ||||
// borderWidth: 1, | |||||
// borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度 | |||||
}, | }, | ||||
data: this.dataList[0].data | data: this.dataList[0].data | ||||
// backgroundStyle: { | |||||
// // borderColor: this.dataList[0].bottomColor, | |||||
// borderColor: '#ff0000', | |||||
// borderWidth: 1 | |||||
// } | |||||
}, | }, | ||||
{ | { | ||||
// 柱顶 | // 柱顶 | ||||
@@ -255,6 +252,7 @@ export default { | |||||
legend: { | legend: { | ||||
itemWidth: 8, | itemWidth: 8, | ||||
itemHeight: 8, | itemHeight: 8, | ||||
selectedMode: false, | |||||
top: '7%', | top: '7%', | ||||
right: '2%', | right: '2%', | ||||
textStyle: { | textStyle: { | ||||
@@ -282,7 +280,7 @@ export default { | |||||
}, | }, | ||||
yAxis: [ | yAxis: [ | ||||
{ | { | ||||
name: '单位:片', | |||||
name: this.unitName, // '单位: 片', | |||||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, | nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, | ||||
type: 'value', | type: 'value', | ||||
splitNumber: 3, | splitNumber: 3, | ||||