1. 程式人生 > >angular 6引入echarts的具體方法

angular 6引入echarts的具體方法

方式: 使用echarts和ngx-eachrts兩個依賴,藉助於ngx..,是因為echarts是基於js編寫,沒有ts檔案。所以就使用ngx-echarts來使用即可。

第一步:安裝依賴

1

2

npm install echarts --save

npm install ngx-echarts --save

第二步:在Module中引入

1

2

3

4

5

6

7

8

9

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({

 imports: [

 ...,

// 引入module

 NgxEchartsModule

 ],

})

export class AppModule { }

第三步:在angular-cli中新增js引入

1

2

3

4

5

6

7

8

// edit .angular-cli.json

{

 "scripts": [

 // add this: 注意,在echarts中可能沒有提供echarts.min.js但是肯定有echarts.js的。對應引入即可。

 

"../node_modules/echarts/dist/echarts.min.js"

// 還可以新增中英文,主題。。。。

 ],

}

第四步:只需要在echarts中放入你需要的html

 

然後在對應的元件中引入:

 

import * as echarts  from 'echarts';

(第二步和第三步為全域性設定,如果僅僅需要元件按需載入,不需要第二步和第三步)

 

ps=====》最後如果出錯,引入:

npm install @types/echarts

 

 

ps:typescript中的echarts需要注意,不能通過var 物件的形式簡寫,需要一口氣載入:

 

if (option && typeof option === "object") {
  echarts.init( document.getElementById("container")).setOption(option, true);

 

 

最後修改主題色調僅僅需要檢視echarts官網:

地址:http://echarts.baidu.com/option.html#title