ionic2集成百度ECharts3

百度的ECharts图表插件很强大，完美支持移动端，github也一直有专人维护，很不错。

1.安装ECharts

用npm安装ECharts：

npm install echarts --save
npm install @types/echarts --save

2.使用ECharts

页面引入import ECharts from 'echarts';
需要在ion-content内放一个div，作为图表的容器：
<div id="main" style="width: 350px;height:300px;" ></div>
在页面的ts文件里的ionViewDidLoad方法里：

 var myChart = ECharts.init(document.getElementById('main') as HTMLDivElement);
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
 
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

更推荐如下这种angular操作dom的方式

1.在页面html
<div #salesBarChart style="height:300px;margin: 10px;"></div>
2.在ts文件
import {ElementRef, ViewChild} from '@angular/core';
...
@ViewChild('salesBarChart') salesBarChart: ElementRef;
...

 ionViewDidLoad() {
  let myChart=ECharts.init(this.salesBarChart.nativeElement);
.....//同上
}

3.网上找的自适应方法

在src目录下添加directives目录，添加一个auto-fit-layout.ts文件，输入以下代码：

import { Directive, ElementRef, Renderer } from '@angular/core';
 
@Directive({
    selector: '[my-auto-fit-layout]'
})
export class AutoFitLayout {
    constructor(public element: ElementRef, public renderer: Renderer) {
        //因为ionic的默认padding宽度是16
        renderer.setElementStyle(element.nativeElement, 'width', `${(document.body.clientWidth - 32).toString()}px`);
    }
}

使用这个指令时，会获取当前窗口宽度，并设置指定div的宽度。将这个指令应用到图表的容器上：

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 350px;height:300px;" my-auto-fit-layout></div>

这样就可以在生成图表的时候自动适应当前容器的宽度了。