114 lines
2.6 KiB
Vue
114 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<v-chart :force-fit="true" :height="height" :data="dataSource" :padding="[0, 0, 40, 60]">
|
||
|
|
<v-axis
|
||
|
|
data-key="name"
|
||
|
|
:title="{ text: title, textStyle: { fill: '#5b9cba', fontSize: 14 }, offset: 45 }"
|
||
|
|
:label="{ textStyle: { fill: '#ade6ee' } }"
|
||
|
|
:grid="{ lineStyle: { stroke: '#406979', strokeOpacity: 0.2, lineDash: [0, 0] } }"
|
||
|
|
:line="{ stroke: '#406979', strokeOpacity: 0.5 }"
|
||
|
|
/>
|
||
|
|
<v-axis
|
||
|
|
data-key="time"
|
||
|
|
:label="{ textStyle: { fill: '#ade6ee' }, offset: 25 }"
|
||
|
|
:grid="{ lineStyle: { stroke: '#406979', strokeOpacity: 0.2, lineDash: [0, 0] }, hideLastLine: true }"
|
||
|
|
:line="{ stroke: '#406979', strokeOpacity: 0.5 }"
|
||
|
|
:tick-line="null"
|
||
|
|
/>
|
||
|
|
<v-polygon position="time*name" shape="custom" :v-style="{ lineWidth: 0 }" />
|
||
|
|
</v-chart>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { registerShape } from 'viser-vue'
|
||
|
|
|
||
|
|
registerShape('polygon', 'custom', {
|
||
|
|
draw: function(cfg, container) {
|
||
|
|
const color = cfg.origin._origin.color // 颜色,取自datasource原始数据中的color
|
||
|
|
|
||
|
|
// 绘制色块
|
||
|
|
return color
|
||
|
|
? container.addShape('rect', {
|
||
|
|
attrs: {
|
||
|
|
x: cfg.x - 32,
|
||
|
|
y: cfg.y - 10,
|
||
|
|
width: 32,
|
||
|
|
height: 20,
|
||
|
|
fill: color,
|
||
|
|
stroke: color
|
||
|
|
}
|
||
|
|
})
|
||
|
|
: null
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const timeList = [
|
||
|
|
'08:00\n04/06',
|
||
|
|
'10:00\n04/06',
|
||
|
|
'12:00\n04/06',
|
||
|
|
'14:00\n04/06',
|
||
|
|
'16:00\n04/06',
|
||
|
|
'18:00\n04/06',
|
||
|
|
'20:00\n04/06',
|
||
|
|
'22:00\n04/06',
|
||
|
|
'00:00\n04/07',
|
||
|
|
'02:00\n04/07',
|
||
|
|
'04:00\n04/07',
|
||
|
|
'06:00\n04/07',
|
||
|
|
// '08:00\n04/07'
|
||
|
|
]
|
||
|
|
|
||
|
|
const typeList = ['MET', 'SOH', 'QC', 'PHD']
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
legendList: {
|
||
|
|
type: Array
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: Number,
|
||
|
|
default: 250
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dataSource: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
const dataSource = typeList.reduce((prev, type) => {
|
||
|
|
return prev.concat(
|
||
|
|
timeList.map(time => {
|
||
|
|
return {
|
||
|
|
name: type,
|
||
|
|
color: '',
|
||
|
|
time
|
||
|
|
}
|
||
|
|
})
|
||
|
|
)
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
dataSource[36].color = '#d3ad16'
|
||
|
|
dataSource[37].color = '#d3ad16'
|
||
|
|
dataSource[38].color = '#d3ad16'
|
||
|
|
dataSource[39].color = '#d3ad16'
|
||
|
|
dataSource[40].color = '#db6423'
|
||
|
|
dataSource[41].color = '#17a840'
|
||
|
|
dataSource[42].color = '#17a840'
|
||
|
|
dataSource[43].color = '#17a840'
|
||
|
|
dataSource[44].color = '#17a840'
|
||
|
|
dataSource[45].color = '#17a840'
|
||
|
|
dataSource[46].color = '#8c6513'
|
||
|
|
dataSource[47].color = '#d3ad16'
|
||
|
|
dataSource[28].color = '#1c82eb'
|
||
|
|
dataSource[34].color = '#1c82eb'
|
||
|
|
|
||
|
|
this.dataSource = dataSource
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style></style>
|