在ionic3 + angular4 中使用Echart外掛程式

方法一、1.  引用Echart.js在src/index.html下方2.  <script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>    然後在需要使用Echart的ts檔案中使用  declare var echarts; 聲明echarts變數3.  在相應的模板html中，聲明Echarts的容器，並給出相應的標識（#container）    <!-- 柱狀圖 -->    <div #container class="echart-main" (window:resize)="onResize($event)"></div>4.  (window:resize)="onResize($event)"是為了做自適應，方便不同大小的device調試，    ts中給出對應的響應事件：    onResize(e){      this.chart.resize();    }5.  擷取容器container的dom節點：    @ViewChild('container') container: ElementRef;    這裡需要注意在檔案內引入ElementRef,ViewChild，6.  下面是對元素進行操作，外掛程式的使用：    let currentData = this.chartData;    let ctx = this.container.nativeElement;    this.chart = echarts.init(ctx);    this.chart.setOption({        //相關配置代碼    })方法二、1.  使用npm/cnpm/yarn...安裝依賴包2.  npm install echarts --save3.  declarations.d.ts檔案中聲明 echarts 變數    declare module 'echarts';4.  頁面中調用       import echarts from 'echarts';5.  添加Ttypings解析（用於編譯器的智能索引）     npm install @types/echarts --save6.  <div id='container' class="echart-main" (window:resize)="onResize($event)"></div>7.  let ctx = <HTMLElement>document.getElementById('myChart');    this.chart = echarts.init(ctx);    this.chart.setOption({        //相關配置代碼    })