是否可以配合echarts使用 about datav

[jiaming743]

可以，你描述的情况应该是datav组件没有获取到正确的宽高 导致没显示出来 可以在控制台查看dom节点的渲染情况

[Wu-1992]

<dv-border-box-10><div id="myChart" :style="{width: '300px', height: '300px'}"></div></dv-border-box-10>,检查元素时div有正常宽高，但是内容确显示不了

[jiaming743]

如果要使用边框组件 建议将需要放置在边框内的内容单独封装成组件 这样比较容易避免这种情况出现

before

<dv-border-box-10>
  <div ref="chart' class="chart"></div>
</dv-border-box-10>

after

<dv-border-box-10>
  <component-a></component-a>
</dv-border-box-10>

<!--component-a-->
<template>
  <div class="container">
    <div ref="chart' class="chart"></div>
  </div>
</template>

// style
.container, .chart {
  width: 100%;
  height: 100%
}

[sunyd1006]

有效度：楼上说得对，建议封装组件，我试过有效。
疑问：这是什么原理的，为什么封装成组件就能够很好的避免这种情况呢？

[jiaming743]

echarts实例化时会获取dom宽高 当前页面mounted时 边框组件的slot插槽尚未渲染完毕 此时获取DOM宽高可能有误 封装成组件后 组件内的mounted函数被调用时 组件的父组件及祖先组件应当已经渲染完毕 此时可以避免获取宽高异常的情况 这只是我一种猜测