在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的大大(#^.^#)