110 lines
2.5 KiB
Vue
110 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<Echart :options="options" id="bottomLeftChart" height="220px" width="100%" ref="myChart"></Echart>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Echart from '@/common/echart'
|
|
export default {
|
|
data () {
|
|
return {
|
|
options: {}
|
|
}
|
|
},
|
|
components: {
|
|
Echart
|
|
},
|
|
props: {
|
|
cdata: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
watch: {
|
|
cdata: {
|
|
handler (newData) {
|
|
this.options = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
// Use axis to trigger tooltip
|
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
}
|
|
},
|
|
legend: {},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
show: false
|
|
},
|
|
color: [
|
|
'#73c0D1',
|
|
'#5470c6'
|
|
],
|
|
textStyle: {
|
|
fontSize: 20
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['房间', '床位'],
|
|
axisLabel: {
|
|
fontSize: 20
|
|
}
|
|
},
|
|
series: [{
|
|
name: '入住数',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: this.cdata.seriesData.map(item => item.value2)
|
|
},
|
|
{
|
|
name: '总数',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: this.cdata.seriesData.map(item => item.value)
|
|
}
|
|
]
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
},
|
|
mounted () {
|
|
const myChart = this.$refs['myChart'].chart
|
|
// 柱状图点击事件
|
|
myChart.on('click', (params) => {
|
|
if (params.seriesName == '总数') {
|
|
this.$router.push({
|
|
path: '/room/list'
|
|
})
|
|
} else {
|
|
this.$router.push({
|
|
path: '/room/checkin'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|