在一个初始宽度未知的容器内绘制图表时，因为无法获取宽度，所以图表会绘制失败，解决的办法是在容器宽度已知后， 调用echarts的resize方法

使用v-charts绘图时遇到数据后加载不显示图像问题，官网第一句就是。ps：官网已经不维护了
解决办法

<template> <!-- [_ https://cdn.jsdelivr.net/npm/element-ui@1.4.0/lib/index.js,https://cdn.jsdelivr.net/npm/element-ui@1.4.0/lib/theme-default/index.css _] -->
  <el-tabs type="border-card" v-model="activeName">
    <el-tab-pane label="用户管理" name="1"> <!-- name 中的数字对应chart的ref -->
      <ve-line :data="chartData" ref="chart1"></ve-line>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="2">
      <ve-line :data="chartData" ref="chart2"></ve-line>
    </el-tab-pane> 
  </el-tabs>
</template>
 
<script>
  export default {
    data () {
      return {
        activeName: '1',
        chartData: {
          columns: ['日期', '销售额-1季度'],
          rows: [
            { '日期': '1月1日', '销售额-1季度': 1523 },
            { '日期': '1月2日', '销售额-1季度': 1223 },
            { '日期': '1月3日', '销售额-1季度': 2123 },
          ]
        }
      }
    },
//监听尺寸的变化
    watch: {
      activeName (v) {
        this.$nextTick(_ => {
          this.$refs[`chart${v}`].echarts.resize()
        })
      }
    }
  }

或者设定父级宽度为100%，再添加:legend-visible="false"和:loading="loading"属性

    <div style="width: 100%">
      <span v-text="$t('jvm.memory.heap.max')"/>
      <span v-text="prettyBytes(current.max)"/>
      <ve-line :legend-visible="false"
              :loading="loading" :data="chartData" height="310px" :settings="chartSettings"></ve-line>
    </div>
export default {
  data() {
    return {
      loading:false
      chartSettings: {
        dimension: 'time',
        metrics: ["used", "committed"],
        labelAlias: {
          'used': '已使用',
          'committed': '可用',
        },
      },
      chartData: {
        columns: ['time', "used", "committed"],
        rows: []
      },
      hasLoaded: false,
    }
  },
 }