<v-chart :options="options" :auto-resize="true" style="height: 500px; width: 100%;">
export default {
// 父组件传递过来的数据 （两种方式声明：1.数组 2.对象）
props: {
titleText: {
type:String,
default: () => {
return '2019 前三季度达标率统计'
}
}, // 图表名称
isPercentage: {
type:Boolean
}, // 是否是%
xAxisData: {
type:Array,
default: () => {
return ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '威武市', '庆阳市']
}
},
seriesData: {
type:Array,
default: () => {
return [100, 100, 17, 100, 100, 100, 17]
}
}
},
// 数据
data() {
return {
title:'',
options: {}
}
},
// 要用到哪些子组件
components: {},
// 计算属性
computed: {},
// 监听
watch: {
seriesData: {
handler(newName, oldName) {
if (oldName) {
this.setOptions()
}
},
immediate:true,
deep:true
}
},
// 生命周期钩子：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
created() {
},
// 生命周期钩子：组件实例渲染完成时调用
mounted() {
this.setOptions()
},
// 函数集，
methods: {
setOptions() {
this.options = {
title: {
text:this.titleText,
left:'center'
},
color:this.$config.chartsColor,
tooltip: {
trigger:'axis',
axisPointer: {// 坐标轴指示器，坐标轴触发有效
type:'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true
},
xAxis: [
{
type:'category',
data:this.xAxisData,
axisTick: {
alignWithLabel:true
}
}
],
yAxis: [
{
type:'value',
axisLabel: {
formatter:this.isPercentage ?'{value} %' :'{value}'
}
}
],
series: [
{
name:'直接访问',
type:'bar',
barWidth:'38%',
data:this.seriesData,
label: {
show:true,
position:'inside',
formatter: (params) => {
return `${params.value}%`
}
}
}
]
}
}
}
}
主要在watch中监听事件，发生变化时，setOptions
