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>
|
</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>
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user