如何实现Vcharts自适应,跟随父元素缩放。
Vcharts是VUE基于echarts为解决echarts复杂繁多的配置项而推出封装图表组件库。Vcharts自带一个属性judge-width,作用是自适应宽高,但是一般只宽度自适应,这是再添加height='100%'即可实现宽高都自适应。
下面是我开发的一个Vcharts封装组件:
<template>
<ve-bar :data="testData" height='100%' :extend="extend" judge-width :colors="colors"></ve-bar>
</template>
<script>
export default {
name:"barChart",
props:{
testData:{
default:function(){
return ""
}
}
},
data () {
return {
colors : ['#6540FD','#FE9000','#F7CB4A','#DCE292','#FFBF9A','#DBA946','#5182E4','#9BCC66','#3FB27E','#B98934',
'#F88D48','#F35352','#CE62D6','#8954D4','#5156B8','#51B4F1','#69D4DB','#D42D6B'],
extend: {
legend:{
show:false,
},
grid:{
x:10,
y:20,
x2:10,
y2:20,
},
xAxis:{
axisLabel: {
textStyle: {
color: '#f0f0f0'
}
},
yAxis: {
axisLabel: {
textStyle: {
color: '#f0f0f0'
}
},
}
},
}
</script>