在ANGULAR6中使用Echarts的正確方式之一

這裏的正確指的是不會在運行過程當中報錯，不會再prod模式下編譯報錯，不會再AOT模式下編譯報錯

我的環境說明：

{
  "name": "angular-for-echarts",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.2",
    "@angular/common": "^6.0.2",
    "@angular/compiler": "^6.0.2",
    "@angular/core": "^6.0.2",
    "@angular/forms": "^6.0.2",
    "@angular/http": "^6.0.2",
    "@angular/platform-browser": "^6.0.2",
    "@angular/platform-browser-dynamic": "^6.0.2",
    "@angular/router": "^6.0.2",
    "core-js": "^2.5.4",
    "echarts": "^4.1.0",
    "ngx-echarts": "^3.0.0",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.2",
    "@angular-devkit/build-angular": "~0.6.3",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.3",
    "@angular/language-service": "^6.0.2",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

 

安裝相關依賴

npm install echarts --save
npm install ngx-echarts --save

引入JS文件

  "scripts": [
                "node_modules/echarts/dist/echarts.js"
            ]
// 這裏有版本問題： V6版本的angular-cli 再也不識別相對路徑

在module文件中導入NgxEchartsModule模塊，通常都是全局使用，放到項目中的共有模塊中，由於並非其餘的每一個模塊都會用到echarts，因此放到app.module.ts文件下並非最佳的實踐方式，可是這裏我這是作了一個demo測試，因此放在了app.module.ts文件下

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { EchartOptionDirectiveComponent } from './echart-option-directive/echart-option-directive.component';
import {NgxEchartsModule} from 'ngx-echarts';

@NgModule({
    declarations: [
        AppComponent,
        EchartOptionDirectiveComponent,
    ],
    imports: [
        BrowserModule,
        NgxEchartsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

建立圖表

export class AppComponent {
    chartOption = {
        title: {
            text: '堆疊區域圖'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data: ['郵件營銷', '聯盟廣告', '視頻廣告', '直接訪問', '搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name: '郵件營銷',
                type: 'line',
                stack: '總量',
                areaStyle: {normal: {}},
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '聯盟廣告',
                type: 'line',
                stack: '總量',
                areaStyle: {normal: {}},
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '視頻廣告',
                type: 'line',
                stack: '總量',
                areaStyle: {normal: {}},
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接訪問',
                type: 'line',
                stack: '總量',
                areaStyle: {normal: {}},
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '搜索引擎',
                type: 'line',
                stack: '總量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {normal: {}},
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    }
}

在對應的模板文件中如此使用

<div echarts [options]="chartOption" class="demo-chart"></div>

經測試： 任何變一下再也不報錯，感謝封裝ngx-echarts的大大(#^.^#)