Echarts 图表宽度设置100%,却只有 100px 问题

需求:有图表数据时展示数据,无数据时展示'暂无数据',且在有数据和无数据的切换过程中,图表正常显示

实现:

  1. 设置两个div,div1作为echarts容器,div2展示‘暂无数据’
  2. 根据是否有数据,用v-show控制两个div的显隐( 此处不能用v-if来控制echarts容器的显隐当无数据时,要用echarts.init(dom).dispose() 来清除画布,而不能用clear 
  3. 在请求到数据后,创建echarts图表要在this.$nextTick(()=>{})中执行( 避免echarts图表宽度只有100px 

 代码实现如下:




你可能感兴趣的:(笔记,echarts,echarts,前端,vue)