在ionic2中使用echarts

安装包 echarts

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

使用echarts

在html文件中添加了用id绑定的div

然后在ts文件中import echarts

createCharts() {
    var myChart = ECharts.init(document.getElementById('tu') 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);
  }

如果需要宽度自适应,在width的设置上使用百分比

import ECharts from 'echarts';

网上抄的一个自适应宽度的指令

import { Directive, ElementRef, Renderer } from '@angular/core';

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

这个指令的问题在于,如果平板端使用了splitpane的话,获取到的宽度就不正常了.在手机窄屏的情况下没有问题,如果宽屏就用百分比来实现好了.

image.png

有高手知道如何改进这个指令的,希望不吝赐教.