ionic3 集成 devextreme 图表

devextreme在国内相对来说用得比较少，但在国外却很火。而且功能很强大，可以说基本的网页需要的UI它都提供有，还能兼容PC和手机H5。
官网地址：https://js.devexpress.com/

1. 集成到ionic

1.1 在项目根目录执行安装

$ npm install --save devextreme devextreme-angular

1.2 在项目根目录创建copy.config.js文件

填入

var copy = require('@ionic/app-scripts/config/copy.config.js');

copy.copyStyleSheets = {
  src: ['{{ROOT}}/node_modules/devextreme/dist/css/**/*'],
  dest: '{{WWW}}/assets/css'
};

module.exports = copy;

图片.png

1.3 修改package.json文件

"config" : {
    "ionic_copy": "./copy.config.js"
},

图片.png

1.4 index.html引入css样式

图片.png

css来自于npm 下载的包，复制一份到

图片.png

最后在src文件夹的index.html里引入

图片.png

2. 调用

2.1 app.module.ts文件中将所需的独立模块（或整个DevExtreme）导入到此

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({ 
    ... 
    imports: [ 
        ... 
        DxDataGridModule , 
        ... 
    ] 
})

如果你的页面使用了懒加载，那么就应该导入该页面的Module里，例如：

图片.png

2.2 使用

html代码

<dx-data-grid
    id="gridContainer"
    [dataSource]="customers"
    [columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']">
</dx-data-grid>

ts代码

import { Customer, Service } from './app.service';

 customers: Customer[];

 constructor(service: Service) {
        this.customers =  service.getCustomers();
 }

模拟数据

import { Injectable } from '@angular/core';

export class Customer {
    ID: number;
    CompanyName: string;
    Address: string;
    City: string;
    State: string;
    Zipcode: number;
    Phone: string;
    Fax: string;
    Website: string;
}

let customers: Customer[] = [{
    "ID": 1,
    "CompanyName": "Super Mart of the West",
    "Address": "702 SW 8th Street",
    "City": "Bentonville",
    "State": "Arkansas",
    "Zipcode": 72716,
    "Phone": "(800) 555-2797",
    "Fax": "(800) 555-2171",
    "Website": "http://www.nowebsitesupermart.com"
}, {
    "ID": 2,
    "CompanyName": "Electronics Depot",
    "Address": "2455 Paces Ferry Road NW",
    "City": "Atlanta",
    "State": "Georgia",
    "Zipcode": 30339,
    "Phone": "(800) 595-3232",
    "Fax": "(800) 595-3231",
    "Website": "http://www.nowebsitedepot.com"
}, {
    "ID": 3,
    "CompanyName": "K&S Music",
    "Address": "1000 Nicllet Mall",
    "City": "Minneapolis",
    "State": "Minnesota",
    "Zipcode": 55403,
    "Phone": "(612) 304-6073",
    "Fax": "(612) 304-6074",
    "Website": "http://www.nowebsitemusic.com"
}, {
    "ID": 4,
    "CompanyName": "Tom's Club",
    "Address": "999 Lake Drive",
    "City": "Issaquah",
    "State": "Washington",
    "Zipcode": 98027,
    "Phone": "(800) 955-2292",
    "Fax": "(800) 955-2293",
    "Website": "http://www.nowebsitetomsclub.com"
}, {
    "ID": 5,
    "CompanyName": "E-Mart",
    "Address": "3333 Beverly Rd",
    "City": "Hoffman Estates",
    "State": "Illinois",
    "Zipcode": 60179,
    "Phone": "(847) 286-2500",
    "Fax": "(847) 286-2501",
    "Website": "http://www.nowebsiteemart.com"
}, {
    "ID": 6,
    "CompanyName": "Walters",
    "Address": "200 Wilmot Rd",
    "City": "Deerfield",
    "State": "Illinois",
    "Zipcode": 60015,
    "Phone": "(847) 940-2500",
    "Fax": "(847) 940-2501",
    "Website": "http://www.nowebsitewalters.com"
}];

@Injectable()
export class Service {
    getCustomers() {
        return customers;
    }
}

3. 效果

图片.png

4. 还有其它各种丰富图表效果，按照官网事例调用即可

图片.png
图片.png
图片.png