lb #14
@ -64,7 +64,19 @@
|
||||
}
|
||||
]"
|
||||
/> -->
|
||||
<techy-bar />
|
||||
<techy-bar
|
||||
unit-name="单位/片"
|
||||
:datainfo="[
|
||||
{
|
||||
name: '产线A',
|
||||
list: [163, 184, 110, 22, 96, 74]
|
||||
},
|
||||
{
|
||||
name: '产线B',
|
||||
list: [162, 172, 122, 15, 82, 74]
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</techy-box>
|
||||
</div>
|
||||
@ -75,7 +87,7 @@
|
||||
class="absolute top-0 left-0"
|
||||
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
|
||||
>
|
||||
<new-bar
|
||||
<!-- <new-bar
|
||||
chart-name="realtime-cost-production"
|
||||
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
|
||||
unit-name="单位: 千片"
|
||||
@ -93,6 +105,20 @@
|
||||
data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
|
||||
}
|
||||
]"
|
||||
/> -->
|
||||
<techy-bar
|
||||
unit-name="单位/千片"
|
||||
:extra-space-between-zero="0.8"
|
||||
:datainfo="[
|
||||
{
|
||||
name: '产线A',
|
||||
list: [4.12, 5.21, 3.2, 0.96, 2.61, 2.2]
|
||||
},
|
||||
{
|
||||
name: '产线B',
|
||||
list: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</techy-box>
|
||||
|
@ -9,7 +9,29 @@ import * as BottomPic from './bottom.png'
|
||||
|
||||
export default {
|
||||
name: 'TechyBar',
|
||||
props: {},
|
||||
props: {
|
||||
datainfo: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{
|
||||
name: '产线A',
|
||||
list: [100, 102, 104, 105, 100, 117]
|
||||
},
|
||||
{
|
||||
name: '产线B',
|
||||
list: [110, 92, 124, 85, 100, 120]
|
||||
}
|
||||
]
|
||||
},
|
||||
unitName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
extraSpaceBetweenZero: {
|
||||
type: Number,
|
||||
default: 25
|
||||
}
|
||||
},
|
||||
mixins: [resize],
|
||||
data() {
|
||||
const color_gradients = [
|
||||
@ -29,32 +51,9 @@ export default {
|
||||
}
|
||||
]
|
||||
|
||||
const mock_data = [
|
||||
{
|
||||
color: [
|
||||
/** top color **/
|
||||
'#0b58ff',
|
||||
/** bottom color **/
|
||||
'#993f80'
|
||||
],
|
||||
name: '产线A',
|
||||
list: [100, 102, 104, 105, 100, 117]
|
||||
},
|
||||
{
|
||||
color: [
|
||||
/** top color **/
|
||||
'#49FBD6',
|
||||
/** bottom color **/
|
||||
'#31A2FF'
|
||||
],
|
||||
name: '产线B',
|
||||
list: [110, 92, 124, 85, 100, 120]
|
||||
}
|
||||
]
|
||||
|
||||
let result = []
|
||||
|
||||
mock_data.map((pl, index) => {
|
||||
this.datainfo.map((pl, index) => {
|
||||
let topCircle = {
|
||||
__position: 'top',
|
||||
name: pl.name,
|
||||
@ -138,6 +137,13 @@ export default {
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff8',
|
||||
fontSize: 8,
|
||||
offset: [0, 6]
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,7 +159,7 @@ export default {
|
||||
option: {
|
||||
grid: {
|
||||
left: '10%',
|
||||
top: 36,
|
||||
top: 48,
|
||||
bottom: 28
|
||||
},
|
||||
xAxis: {
|
||||
@ -167,13 +173,22 @@ export default {
|
||||
lineStyle: {}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff8'
|
||||
color: '#fff8',
|
||||
fontSize: 10
|
||||
},
|
||||
data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: -25,
|
||||
// min: -25,
|
||||
min: this.extraSpaceBetweenZero * -1,
|
||||
name: this.unitName,
|
||||
nameTextStyle: {
|
||||
color: '#fff8',
|
||||
fontSize: 8,
|
||||
verticalAlign: 'top',
|
||||
align: 'right'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
@ -182,6 +197,7 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff8',
|
||||
fontSize: 10,
|
||||
/** y轴不从0开始,也可以用 xAxis 向下 offset 的方式模拟 **/
|
||||
formatter: function(value, index) {
|
||||
if (value < 0) {
|
||||
@ -207,8 +223,7 @@ export default {
|
||||
type: 'image',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
// left: '10%',
|
||||
// bottom: '5%',
|
||||
scaleX: 0.8,
|
||||
style: {
|
||||
image: 'image url',
|
||||
height: 0,
|
||||
|
Loading…
Reference in New Issue
Block a user