微信小程序引入echarts不显示也不报错

最新推荐文章于 2024-04-19 15:44:08 发布

原创最新推荐文章于 2024-04-19 15:44:08 发布 · 3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #微信小程序 #前端

微信小程序同时被 2 个专栏收录

10 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

本文详细探讨了微信小程序中使用ECharts图表遇到的显示问题，包括开发者工具未显示、高度宽度设置和container容器的使用方法。通过实例和关键代码，帮助开发者解决在配置和布局上的常见困扰。

微信小程序引入echarts不显示也不报错

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

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

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

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

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

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

注释附上

ec-canvas {
  width: 100%;
  height: 100%;
}
.container {
  /*<生成绝对定位的元素*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
 
  /*扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间*/
  display: flex;
  /*主轴为垂直方向，起点在上沿*/
  flex-direction: column;
  /*交叉轴中点对齐*/
  align-items: center;
  /*两端对齐，项目之间的间隔相等*/
  justify-content: space-between;

  /*边框border和内边距padding在现有元素的宽度和高度*/
  box-sizing: border-box;
}

如下图
在这里插入图片描述