Css Echart库不适合在Ionic上使用

我将echart库包括在我的ionic项目中，我实现了它，它为我带来了它应该带来的一切，但由于某些原因，图形不适合屏幕的宽度和长度，最终导致它看起来很糟糕

index.page.html

<div class="col-md-12">
          <div class="card card-chart">
            <div class="card-header card-header-success chart-area" style="background:white !important;">
                        <div id="grafico_1" class='demo-chart' echarts></div> --> Graphic container
            </div>
            <div class="card-body">
              <h4 class="card-title">Daily Sales</h4>
              <p class="card-category">
                <span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
            </div>
            <div class="card-footer">
              <div class="stats">
                <i class="material-icons">access_time</i> updated 4 minutes ago
              </div>
            </div>
          </div>

index.page.scss

  .demo-chart{
  width: 100%;
  height: 200px;
}

把代码放进去会生成图形，但是，这个图形不适合移动设备的宽度和高度，我需要知道我如何才能适应移动设备的宽度和高度，它看起来不错

  .demo-chart{
  width: 100%;
  height: 200px;
}