如何做到自适应？我想在移动端优美的展示 about v-charts HOT 37 CLOSED

.canvasChart
      width: 100%
      height: 400px
      margin-bottom: pxTem(200)

<div class="canvasChart">
              <ve-line ref='chart1' :after-config="afterConfig" :data-zoom="dataZoom" :legend-visible="false" :colors="chartColors" :width="chartWidth" :data="chartData"></ve-line>
            </div>
```
我设置了容器宽度为什么还是报Can't get dom width or height

mounted () {
      this.$nextTick(() => {
        this.$refs[`chart1`].echarts.resize()
      })
    }

<template>
    <v-container fluid>
      <v-container grid-list-md text-xs-center>
        <v-layout row wrap>
          <v-flex lg9>
            <v-card ref="abc">
              <ve-line :data="chartData" :settings="chartSettings" ref="chart1"></ve-line>
            </v-card>
          </v-flex>
          <v-flex lg3>
            <v-card>
              <ve-line :data="chartData" :settings="chartSettings" ref="chart2"></ve-line>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
      <v-container grid-list-md text-xs-center>
        <div>
          <v-btn color="primary" v-on:click="button">Primary</v-btn>
        </div>
      </v-container>
    </v-container>
</template>


<script>
export default {
  data: function () {
    return {
      chartData: {
        columns: ['日期', '成本', '利润', '占比', '其他'],
        rows: [
          { '日期': '1月1日', '成本': 1523, '利润': 1523, '占比': 0.12, '其他': 100 },
          { '日期': '1月2日', '成本': 1223, '利润': 1523, '占比': 0.345, '其他': 100 },
          { '日期': '1月3日', '成本': 2123, '利润': 1523, '占比': 0.7, '其他': 100 },
          { '日期': '1月4日', '成本': 4123, '利润': 1523, '占比': 0.31, '其他': 100 },
          { '日期': '1月5日', '成本': 3123, '利润': 1523, '占比': 0.12, '其他': 100 },
          { '日期': '1月6日', '成本': 7123, '利润': 1523, '占比': 0.65, '其他': 100 }
        ]
      },
      chartSettings: {
        stack: { '售价': ['成本', '利润'] },
        area: true
      },
      width: '90%',
      height: '350px'
    }
  },
  mounted: function () {
    that.$refs[`chart1`].echarts.resize()
  },
  methods: {
    button () {
      this.$refs[`chart1`].echarts.resize()
      this.$refs[`chart2`].echarts.resize()
    }
  }
}
</script>

mounted: function () {
  this.$nextTick(function () {
    that.$refs[`chart1`].echarts.resize()
  })
},

export default new Router({
  routes: [
    { path: '/',
      name: 'Root',
      component: Layout,
      meta: { requiresAuth: true },
      children: [
        {
          path: 'index',
          component: Index
        }
      ]
    },
    { path: '/test', name: 'Test', component: Test, meta: { requiresAuth: true } },
    { path: '/login', name: 'Login', component: Login, meta: { requiresAuth: false } }
  ]
})

<template>
  <v-app>
    <v-navigation-drawer
      fixed
      clipped
      app
      v-model="drawer"
    >
      <v-list dense>
        <template v-for="(item, i) in items">
          <v-layout
            row
            v-if="item.heading"
            align-center
            :key="i"
          >
            <v-flex xs6>
              <v-subheader v-if="item.heading">
                {{ item.heading }}
              </v-subheader>
            </v-flex>
            <v-flex xs6 class="text-xs-center">
              <a href="#!" class="body-2 black--text">EDIT</a>
            </v-flex>
          </v-layout>
          <v-list-group v-else-if="item.children" v-model="item.model" no-action>
            <v-list-tile slot="item" @click="">
              <v-list-tile-action>
                <v-icon>{{ item.model ? item.icon : item['icon-alt'] }}</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>
                  {{ item.text }}
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile
              v-for="(child, i) in item.children"
              :key="i"
              @click=""
            >
              <v-list-tile-action v-if="child.icon">
                <v-icon>{{ child.icon }}</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>
                  {{ child.text }}
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list-group>
          <v-list-tile v-else @click="">
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>
                <router-link :to="{path: item.route}">{{ item.text }}</router-link>
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </template>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar
      color="blue-grey darken-3"
      dark
      app
      clipped-left
      fixed
    >
      <v-toolbar-title :style="$vuetify.breakpoint.smAndUp ? 'width: 300px; min-width: 250px' : 'min-width: 72px'" class="ml-0 pl-3">
        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
        <span class="hidden-xs-only">APP</span>
      </v-toolbar-title>
      <div class="d-flex align-center" style="margin-left: auto">
        <v-menu bottom left>
          <v-btn icon slot="activator" dark>
            <v-icon large>account_circle</v-icon>
          </v-btn>
          <v-list>
            <v-list-tile @click="profile">
              <v-list-tile-title>个人信息</v-list-tile-title>
            </v-list-tile>
            <v-list-tile @click="logout">
              <v-list-tile-title>退出登录</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>
      </div>
    </v-toolbar>
    <v-content>
      <router-view :drawer="drawer">
        <v-container fluid></v-container>
      </router-view>
    </v-content>
    <v-footer app></v-footer>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>
          <span>退出成功！{{ seconds }}秒后跳转至登录页...</span>
          <v-spacer></v-spacer>
        </v-card-title>
      </v-card>
    </v-dialog>
  </v-app>
</template>

<style>
a {
    text-decoraction: none;
}
.router-link-active {
    text-decoration: none;
}
</style>

<script>
  export default {
    data: () => ({
      seconds: 3,
      interval_flag: '',
      dialog: false,
      drawer: null,
      items: [
        { icon: 'home', text: '概览', route: '/index' },
        { icon: 'history', text: 'Frequently contacted', route: '/login' },
        { icon: 'content_copy', text: 'Duplicates' }
      ]
    }),
    props: {
      source: String
    },
    methods: {
      // 登录逻辑
      profile () {
        console.log('profile')
      },

      logout () {
        localStorage.setItem('STORAGE_TOKEN', '')
        this.dialog = true
        this.interval_flag = setInterval(() => {
          this.seconds = this.seconds - 1
          if (this.seconds <= 0) {
            clearInterval(this.interval_flag)
            this.$router.push('/login')
          }
        }, 1000)
      }
    }
  }
</script>

<template>
  <v-container fluid>
    <v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex lg9>
          <v-card ref="abc">
            <ve-line :data="chartData" :settings="chartSettings" ref="chart1"></ve-line>
          </v-card>
        </v-flex>
        <v-flex lg3>
          <v-card>
            <ve-line :data="chartData" :settings="chartSettings" ref="chart2"></ve-line>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
    <v-container grid-list-md text-xs-center>
      <div>
        <v-btn color="primary" v-on:click="button">Primary</v-btn>
      </div>
    </v-container>
  </v-container>
</template>

<script>
export default {
  props: {
    drawer: {
      type: Boolean
    }
  },
  data: function () {
    return {
      chartData: {
        columns: ['日期', '成本', '利润', '占比', '其他'],
        rows: [
          { '日期': '1月1日', '成本': 1523, '利润': 1523, '占比': 0.12, '其他': 100 },
          { '日期': '1月2日', '成本': 1223, '利润': 1523, '占比': 0.345, '其他': 100 },
          { '日期': '1月3日', '成本': 2123, '利润': 1523, '占比': 0.7, '其他': 100 },
          { '日期': '1月4日', '成本': 4123, '利润': 1523, '占比': 0.31, '其他': 100 },
          { '日期': '1月5日', '成本': 3123, '利润': 1523, '占比': 0.12, '其他': 100 },
          { '日期': '1月6日', '成本': 7123, '利润': 1523, '占比': 0.65, '其他': 100 }
        ]
      },
      chartSettings: {
        stack: { '售价': ['成本', '利润'] },
        area: true
      },
      width: '90%',
      height: '350px'
    }
  },
  mounted: function () {
    console.log('------------------------------')
    console.log(this.drawer)
    this.$refs[`chart1`].echarts.resize()
  },
  methods: {
    button () {
      this.$refs[`chart1`].echarts.resize()
      this.$refs[`chart2`].echarts.resize()
    }
  },
  watch: {
    drawer (newValue, oldValue) {
      this.$refs[`chart1`].echarts.resize()
      this.$refs[`chart2`].echarts.resize()
      console.log(newValue)
    }
  }
}
</script>

  mounted: function () {
    setTimeout(() => {
      console.log('------------------------------')
      this.$refs[`chart1`].echarts.resize()
      this.$refs[`chart2`].echarts.resize()
    }, 200)
    // this.$nextTick(function () {
    //   this.$refs[`chart1`].echarts.resize()
    //   this.$refs[`chart2`].echarts.resize()
    // })
  },