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": "[phone]",    "Fax": "[phone]",    "Website": "http://www.nowebsitesupermart.com"}, {    "ID": 2,    "CompanyName": "Electronics Depot",    "Address": "2455 Paces Ferry Road NW",    "City": "Atlanta",    "State": "Georgia",    "Zipcode": 30339,    "Phone": "[phone]",    "Fax": "[phone]",    "Website": "http://www.nowebsitedepot.com"}, {    "ID": 3,    "CompanyName": "K&S Music",    "Address": "1000 Nicllet Mall",    "City": "Minneapolis",    "State": "Minnesota",    "Zipcode": 55403,    "Phone": "[phone]",    "Fax": "[phone]",    "Website": "http://www.nowebsitemusic.com"}, {    "ID": 4,    "CompanyName": "Tom's Club",    "Address": "999 Lake Drive",    "City": "Issaquah",    "State": "Washington",    "Zipcode": 98027,    "Phone": "[phone]",    "Fax": "[phone]",    "Website": "http://www.nowebsitetomsclub.com"}, {    "ID": 5,    "CompanyName": "E-Mart",    "Address": "3333 Beverly Rd",    "City": "Hoffman Estates",    "State": "Illinois",    "Zipcode": 60179,    "Phone": "[phone]",    "Fax": "[phone]",    "Website": "http://www.nowebsiteemart.com"}, {    "ID": 6,    "CompanyName": "Walters",    "Address": "200 Wilmot Rd",    "City": "Deerfield",    "State": "Illinois",    "Zipcode": 60015,    "Phone": "[phone]",    "Fax": "[phone]",    "Website": "http://www.nowebsitewalters.com"}];

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

3. 效果

图片.png

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

图片.png

图片.png

图片.png

作者：No刹那光辉
链接：https://www.jianshu.com/p/903c17858e16