The introduction of echarts into the WeChat applet does not display or report an error

The introduction of echarts into the WeChat applet does not display or report an error

The first one is not displayed on the developer tools

You need to give ceharts component a height and width

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

The second one gives the height and width or does not display

You need to add a style container to the view outside the ceharts tag

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

note attached

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;
}

As shown below
insert image description here

Guess you like

Origin blog.csdn.net/TC_DESpipi/article/details/126156738