<template>
<div ref="dom" class="charts chart-pie"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'barChart',
props: {
xData: {
typd: Array,
default: () => []
},
yData: {
typd: Array,
default: () => []
}
},
data () {
return {
dom: null
}
},
methods: {
resize () {
this.dom.resize()
}
},
mounted () {
this.$nextTick(() => {
let option = {
backgroundColor: '#fff',
title: {
text: '会议数量新增',
left: '10',
top: '5',
textStyle: {
color: '#333',
fontSize: 18
}
},
grid: {
left: '5%',
right: '2%',
bottom: '10%',
top: '20%'
// containLabel: true,
},
xAxis: {
data: this.xData,
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#999',
fontSize: 12
}
},
yAxis: {
// name: "单位:次",
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#999',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
color: '#eee'
}
}
// interval:500,
},
series: [
{
type: 'bar',
barWidth: '50%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#5ef3ff'
},
{
offset: 1,
color: '#06a4f4'
}
],
false
)
}
},
label: {
normal: {
show: true,
fontSize: 16,
fontWeight: 'bold',
color: '#999',
position: 'top'
}
},
data: this.yData
}
]
}
this.dom = echarts.init(this.$refs.dom)
this.dom.setOption(option)
on(window, 'resize', this.resize)
})
},
beforeDestroy () {
off(window, 'resize', this.resize)
}
}
网友评论