标签：toolbox epo grid 5.0 tle install star tooltip 之一
这里的正确指的是不会在运行过程中报错，不会再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 ecahrts --save
npm install ngx-echarts --save
"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的大大(#^.^#)
标签：toolbox epo grid 5.0 tle install star tooltip 之一
原文地址：https://www.cnblogs.com/timetimetime/p/9106182.html
