在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({        //相关配置代码    })