Viser X轴和Y轴数据过长,显示不全的问题

  简单理解下就是，canvas的大小是固定的，x最后存放的内容距离边框的距离不足，导致数据超出canvas范围显示不全

增大 数据内容和边框的距离可以解决问题

类似盒子模型 增加paddinng 即可

<v-chart   :padding="padding">  底部随意设置padding属性即可  

export default { data() { return { data, scale, height: 400,padding: [20, 'auto', 300, 'auto'] }; } }; 

<template>
  <div >
    <v-chart :force-fit="true" :padding="padding" AxisX.IntervalOffset = 1; :height="height"   
    :data="data" :scale="scale" :onClick="handleClick">
      <v-tooltip/>
      <v-axis/>
      <v-legend :useHtml='true' :flipPage='true'
                :containerTpl='containerTpl' />
      <v-line position="type*y" :color="color"/>
      <v-point position="type*y" :color="color" :size="4" :v-style="style" :shape="'circle'"/>
    </v-chart>
    <div style="display: flex; justify-content: center">
      <h4>{{ title }}</h4>
    </div>
  </div>
</template>

props: {
      title: {
        type: String,
        default: ''
      },
      dataSource: {
        type: Array,
        default: () => [
          { type: 'Jan', jeebt: 3.9 },
          { type: 'Feb', jeebt: 4.2 },
          { type: 'Mar', jeebt: 5.7 },
          { type: 'Apr', jeebt: 8.5 },
          { type: 'May', jeebt: 11.9 },
          { type: 'Jun', jeebt: 15.2 },
          { type: 'Jul', jeebt: 17.0 },
          { type: 'Aug', jeebt: 16.6 },
          { type: 'Sep', jeebt: 14.2 },
          { type: 'Oct', jeebt: 10.3 },
          { type: 'Nov', jeebt: 6.6 },
          { type: 'Dec', jeebt: 4.8 }
        ]
      },
      fields: {
        type: Array,
        default: () => [ 'jeebt']
      },
      // 别名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
      aliases:{
        type: Array,
        default: () => []
      },
      height: {
        type: Number,
        default: 254
      }
    },
    data() {
      return {
        color: ['x', ['#FF9D2D', '#3AA1FF', '#F2637B', '#4ECB73']],
        containerTpl:'<div class="g2-legend" style="position:absolute; top:20px;right:60px;width:auto;">'
          + '<h4 class="g2-legend-title"></h4>'
          + '<ul class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></ul>'
          + '</div>',
        scale: [{
          dataKey: 'x',
          min: 0,
          max: 1
        }],
        style: { stroke: '#fff', lineWidth: 1 },
        padding:[20, 'auto', 30, 'auto']
      }
    },
    computed: {
      data() {
        const dv = new DataSet.View().source(this.dataSource)
        dv.transform({
          type: 'fold',
          fields: this.fields,
          key: 'x',
          value: 'y'
        })
        let rows =  dv.rows
        // 替换别名
        rows.forEach(row => {
          for (let item of this.aliases) {
            if (item.field === row.x) {
              row.x = item.alias
              break
            }
          }
        })
        return rows
      }
    }