学无先后,达者为师

网站首页 编程语言 正文

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

作者:Mr.wang、、 更新时间: 2022-08-15 编程语言

如何实现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>

原文链接:https://blog.csdn.net/qq_30258721/article/details/126291989

栏目分类
最近更新