lb #14

Merged
gtz217 merged 20 commits from lb into master 2022-11-23 09:44:40 +08:00
2 changed files with 73 additions and 32 deletions
Showing only changes of commit 41fba93d47 - Show all commits

View File

@ -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>

View File

@ -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,