码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-05-29 17:43:29      阅读:1632      评论:0      收藏:0      [点我收藏+]

标签: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

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



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

标签:toolbox   epo   grid   5.0   tle   install   star   tooltip   之一   

原文地址:https://www.cnblogs.com/timetimetime/p/9106182.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!