Files
xkrs_ms/ruoyi-ui/src/views/dashboard/BarChart.vue
paidaxing444 b4f4a59812 20200506-zlp-2
首页新增教师学位统计
2020-05-06 18:00:19 +08:00

96 lines
2.0 KiB
Vue

<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['班级A', '班级B', '班级C', '班级D', '班级E', '班级F', '班级G'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
}
}],
series: [{
name: '幼儿出勤率',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [30, 29, 28, 31, 33, 18, 20],
animationDuration
}, {
name: '教师出勤率',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [3, 3, 3, 3, 2, 3, 3],
animationDuration
}]
})
}
}
}
</script>