百度的ECharts图表插件很强大,完美支持移动端,github也一直有专人维护,很不错。
1.安装ECharts
用npm安装ECharts:
npm install echarts --savenpm install @types/echarts --save
2.使用ECharts
页面引入import ECharts from 'echarts';
需要在ion-content内放一个div,作为图表的容器:<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <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>
这样就可以在生成图表的时候自动适应当前容器的宽度了。
联系客服