when init echarts on __DEV__ env, warn can't get dom width or height

[Oscar-ren]

One-line summary [问题简述]

When i init the echarts dom in the webpack env, always get the warnning "Can't get dom width or height."

Version & Environment

I used vue + webpack + echarts3

ECharts option

mounted () {
    this.drawLine();
    this.restaurants = this.loadAll();
  },
  methods: {
    drawLine () {
      this.myChart = this.$echarts.init(document.getElementById('myChart'));
        // 绘制图表
      this.myChart.setOption({
        title: { text: '在Vue中使用echarts' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      });
    },

Other comments

I see the warn stack, and found the reason maybe can't get the canvas dom.
In the pic, my dom is a div, but the code is detection the dom whether a canvas, i don't see any code to add canvas tag before the dom judge.

thanks.

[pissang]

This usually happens when code can't get clientWidth or clientHeight from your dom.

[Oscar-ren]

thanks, I found the problem is using elementUI tab component, if I put the echartDiv out of tab component, there will be render expectation. I will track this problem.

<div id="myChart2" :style="{width: '500px', height: '300px'}"></div>
<el-tabs type="card">
   <el-tab-pane label="图表" class="tab-item">
      <div id="myChart" :style="{width: '500px', height: '300px'}"></div>
   </el-tab-pane>
</el-tabs>

[Oscar-ren]

The key of the problem is let the init dom have clientWidth or clientHeight.
When to use the element tab component and you don't set the init value of el-tabs, the mouted lifecycle to init echarts will be failed. So you can do like this:

<el-tabs type="card" v-model="firstTabValue">
    <el-tab-pane label="图表" class="tab-item" name="0">
          <el-card class="box-card">
            <div id="myChart" :style="{width: '500px', height: '300px'}" ></div>
          </el-card>
    </el-tab-pane>
    <el-tab-pane label="表格" name="1"></el-tab-pane>
</el-tabs>

export default {
  name: 'Layout',
  data () {
    return {
      firstTabValue: '1'
    }
  }
}

If the echart tab-pane don't first display, you could trigger setOption in the @tab-click event

If someone find the better solution, please tell me, thanks.