利用judge-width属性实现Vcharts图表自适应

如何实现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>
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攻城狮炭烤策划

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值