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> </div>
</techy-box> </techy-box>
</div> </div>
@ -75,7 +87,7 @@
class="absolute top-0 left-0" class="absolute top-0 left-0"
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
> >
<new-bar <!-- <new-bar
chart-name="realtime-cost-production" chart-name="realtime-cost-production"
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']" :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
unit-name="单位: 千片" unit-name="单位: 千片"
@ -93,6 +105,20 @@
data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14] 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> </div>
</techy-box> </techy-box>

View File

@ -9,7 +9,29 @@ import * as BottomPic from './bottom.png'
export default { export default {
name: 'TechyBar', 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], mixins: [resize],
data() { data() {
const color_gradients = [ 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 = [] let result = []
mock_data.map((pl, index) => { this.datainfo.map((pl, index) => {
let topCircle = { let topCircle = {
__position: 'top', __position: 'top',
name: pl.name, name: pl.name,
@ -138,6 +137,13 @@ export default {
], ],
global: false // false global: false // false
} }
},
label: {
show: true,
position: 'top',
color: '#fff8',
fontSize: 8,
offset: [0, 6]
} }
} }
@ -153,7 +159,7 @@ export default {
option: { option: {
grid: { grid: {
left: '10%', left: '10%',
top: 36, top: 48,
bottom: 28 bottom: 28
}, },
xAxis: { xAxis: {
@ -167,13 +173,22 @@ export default {
lineStyle: {} lineStyle: {}
}, },
axisLabel: { axisLabel: {
color: '#fff8' color: '#fff8',
fontSize: 10
}, },
data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他'] data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
min: -25, // min: -25,
min: this.extraSpaceBetweenZero * -1,
name: this.unitName,
nameTextStyle: {
color: '#fff8',
fontSize: 8,
verticalAlign: 'top',
align: 'right'
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -182,6 +197,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#fff8', color: '#fff8',
fontSize: 10,
/** y轴不从0开始也可以用 xAxis 向下 offset 的方式模拟 **/ /** y轴不从0开始也可以用 xAxis 向下 offset 的方式模拟 **/
formatter: function(value, index) { formatter: function(value, index) {
if (value < 0) { if (value < 0) {
@ -207,8 +223,7 @@ export default {
type: 'image', type: 'image',
left: 0, left: 0,
bottom: 0, bottom: 0,
// left: '10%', scaleX: 0.8,
// bottom: '5%',
style: { style: {
image: 'image url', image: 'image url',
height: 0, height: 0,