Echart库不适用于Ionic

问题描述

我将echart库包含在我的离子项目中，我实现了它，它为我带来了应有的一切，但是由于某种原因，该图形与屏幕的宽度和长度不匹配，因此看起来很糟糕。最终结果

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.ts

import { Component,OnInit } from '@angular/core';
import * as $ from 'jquery';
import * as echarts from 'echarts';

@Component({
  selector: 'app-index',templateUrl: './index.page.html',styleUrls: ['./index.page.scss'],})
export class IndexPage implements OnInit {

  option = {
    grid: {
      top: '6',right: '0',bottom: '17',left: '25',},xAxis: {
      data: [ '2006','2008','2010','2012','2014'],axisLine: {
        linestyle: {
          color: '#ccc'
        }
      },axisLabel: {
        fontSize: 10,color: '#666'
      }
    },yAxis: {
      splitLine: {
        linestyle: {
          color: '#ddd'
        }
      },series: [
      {
        name: 'Oranges',type: 'bar',data: [20,20,36,12,15]
      },{
        name: 'Apples',data: [8,5,25,10,10]
      }
    ]
  };

  constructor() { }

  ngOnInit() {

    // Generar grafico

    let grafico_test = echarts.init($('#grafico_1')[0]);
      grafico_test.setoption(this.option);
    
  }

}

index.page.scss

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

放入该代码即可生成图形，但是，该图形不适合移动设备的宽度和高度，我需要知道如何做才能适合移动设备的宽度和高度，看起来很不错>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）