在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 --save

3.  declarations.d.ts文件中声明 echarts 变量

    declare module 'echarts';

4.  页面中调用   
    import echarts from 'echarts';

5.  添加Ttypings解析（用于编译器的智能索引） 
    npm install @types/echarts --save

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