Node.js

安装Node.js版本

查看Node.js版本

>node --version

>node -v

v10.14.1

查看npm版本

>npm --version

>npm -v

6.4.1

查看全局安装的模块

>npm list -g  --depth=0

C:\Users\MyHome\AppData\Roaming\npm

`-- cnpm@6.0.0

安装@angular/cli

>npm install -g @angular/cli@1.4.10

执行第一个应用

>ng new my-app

>cd my-app

>ng serve --open

支持echarts

>npm install echarts[@4.2.0-rc.2] --save

>npm install ngx-echarts@2.3.1 --save

Step1, importNgxEchartsModulein your app module (or any other proper angular module):

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({

  imports: [

    ...,

    NgxEchartsModule

  ],

  ...

})

export class AppModule { }

Step2: import echarts in the"scripts"list ofangular-cli.jsonjust like:

{  // projects ...  "architect": {    "build": {      "options": {        "scripts": [+"../node_modules/echarts/dist/echarts.min.js"]      }    }  }}

Step3: useechartsdirective in a div which haspre-defined height. (From v2.0, it has default height: 400px)

Simple example:

html:

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

scss:

.demo-chart {

  height: 400px;

}

component:

import { EChartOption } from 'echarts';

// ...

chartOption: EChartOption = {

  xAxis: {

    type: 'category',

    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

  },

  yAxis: {

    type: 'value'

  },

  series: [{

    data: [820, 932, 901, 934, 1290, 1330, 1320],

    type: 'line'

  }]

}