这里的正确指的是不会在运行过程中报错,不会再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: [, , , , , , ]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
areaStyle: {normal: {}},
data: [, , , , , , ]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {normal: {}},
data: [, , , , , , ]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {normal: {}},
data: [, , , , , , ]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {normal: {}},
data: [, , , , , , ]
}
]
}
}

在对应的模板文件中如此使用

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

经测试: 任何变一下不再报错,感谢封装ngx-echarts的大大(#^.^#)

在ANGULAR6中使用Echarts的正确方式之一的更多相关文章

  1. 在EntityFramework6中管理DbContext的正确方式——2DbContext的默认行为(外文翻译)

    (译者注:使用EF开发应用程序的一个难点就在于对其DbContext的生命周期管理,你的管理策略是否能很好的支持上层服务 使用独立事务,使用嵌套事务,并行执行,异步执行等需求? Mehdi El Gu ...

  2. 前端项目引入Echarts中的dataTool的正确方式

    使用echarts画箱线图时调用echarts.dataTool.prepareBoxplotData() 报错:"echarts.dataTool.prepareBoxplotData i ...

  3. 在EntityFramework6中管理DbContext的正确方式——1考虑的关键点(外文翻译)

    (译者注:使用EF开发应用程序的一个难点就在于对其DbContext的生命周期管理,你的管理策略是否能很好的支持上层服务 使用独立事务,使用嵌套事务,并行执行,异步执行等需求? Mehdi El Gu ...

  4. 在EntityFramework6中管理DbContext的正确方式——3环境上下文DbContext vs 显式DbContext vs 注入DbContext(外文翻译)

    (译者注:使用EF开发应用程序的一个难点就在于对其DbContext的生命周期管理,你的管理策略是否能很好的支持上层服务 使用独立事务,使用嵌套事务,并行执行,异步执行等需求? Mehdi El Gu ...

  5. 在EntityFramework6中管理DbContext的正确方式——4DbContextScope:一个简单的,正确的并且灵活的管理DbContext实例的方式(外文翻译)

    (译者注:使用EF开发应用程序的一个难点就在于对其DbContext的生命周期管理,你的管理策略是否能很好的支持上层服务 使用独立事务,使用嵌套事务,并行执行,异步执行等需求? Mehdi El Gu ...

  6. 在vue项目中封装echarts的正确姿势

    为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...

  7. 在Linux中配置DNS的正确方式

    链接:http://ccl.cse.nd.edu/operations/condor/hostname.shtml Common Hostname Problem on Linux Newly ins ...

  8. Android笔记之Fragment中创建ViewModel的正确方式

    之前一直都是这么写的 pageViewModel = ViewModelProviders.of(this).get(PageViewModel.class); //参数this是当前fragment ...

  9. jquery中取消和绑定hover事件的正确方式

    在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...

随机推荐

  1. 总结一下vue调试的方法

    1.最推荐使用的是vue的chrome插件: 2.平时开发中常用到的调试代码:console.log().alert():此外还有console.error()这个我用的比较少,感觉跟console. ...

  2. C语言的面向对象设计之 X264,FFMPEG 架构探讨

    FFMPEG架构分析 使用面向对象的办法来设想这样一个编解码库,首先让人想到的是构造各种编解码器的类,然后对于它们的抽象基类确定运行数据流的规则,根据算法转换输入输出对象. 在实际的代码,将这些编解码 ...

  3. 多媒体开发之---h.264 SPS PPS解析源代码,C实现一以及nal分析器

    http://blog.csdn.net/mantis_1984/article/details/9465909 http://blog.csdn.net/arau_sh/article/detail ...

  4. VB.NET版机房收费系统—数据库设计

    之前第一遍机房收费的时候,用的数据库是别人的.认知也仅仅能建立在别人的基础上,等自考中<数据库系统原理>这本书学完了之后,再去看曾经的数据库,发现数据库真的还须要进一步的优化.以下是我设计 ...

  5. mongodb的锁和高并发

    1 mongodb的锁 mongodb使用的读写锁. 2 mongodb高并发 同样是读写锁造成的问题. 3 findandmodify 该操作是原子的.

  6. ajax json html 结合

    <table id="datas" border="1" cellspacing="0" style="border-col ...

  7. Windows消息、绘图与多线程

    有一个项目,一旦点下按钮后,用死循环不停的读数据,读出后立刻用可视化的方法显示.如果不采用多线程的方法,程序运行都正确,但无法关闭窗口,不清楚是窗口无法通过关闭按钮来接受Windows消息,还是接受了 ...

  8. view定位

  9. Codeforces Round #376 (Div. 2) C. Socks —— 并查集 + 贪心

    题目链接:http://codeforces.com/contest/731/problem/C 题解: 1.看题目时,大概知道,不同的袜子会因为要在同一天穿而差生了关联(或者叫相互制约), 其中一条 ...

  10. RBAC打造通用web管理权限

    https://www.cnblogs.com/lamp01/p/6576432.html https://www.imooc.com/learn/799