技術標籤：小程式

我在使用微信小程式載入Echarts圖表時，首先從官方github（https://github.com/ecomfe/echarts-for-weixin）中下載工程檔案，本地測試無問題。但是自己新建專案將程式碼複製過去的時候，出現了既不報錯也不顯示的問題，頁面為空白。稍後我使用了多個博主的程式碼做測試，終於發現了問題所在。

原因為原始工程檔案中wxml檔案格式如下

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
 

包含了container容器，而在wxss中沒有對應定義，所以在wxss中補上該樣式即可顯示

/**index.wxss**/
.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;
} 
ec-canvas {
  width: 100%;
  height: 100%;
  background-color: #fff; 
}