微信小程序引入echarts不显示 开发者工具上显示, 但上线不显示 也不报错

第一种  在开发者工具上没有显示 

你需要给ceharts组件一个高度和宽度

 style="width: 100%; height: 500px;" 

<ec-canvas style="width: 100%; height: 500px;" id="mychart-height" canvas-id="mychart-height" ec="{{ ec }}">
          </ec-canvas>

第二种 给了高度和宽度还是没有显示 

你需要给ceharts标签外面的view加个样式container

<view class="container">
      <ec-canvas style="width: 100%; height: 500px;" id="mychart-height" canvas-id="mychart-height" ec="{{ ec }}"></ec-canvas>
</view>

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

其实在文档中有写,但有还是容易被 忽略

 第三种  开发者工具上显示, 但上线不显示 也不报错

 

那就是你可能使用scroll-view,去掉它即可

1.canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。

2.请勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件。

3. css 动画对 canvas 组件无效。