Angular ngx-echarts圖表

1. 安裝echarts包、ngx-echarts包

npm install echarts --save
npm install ngx-echarts --save

2. angular.json中引入echarts.js文件

"scripts": [ "node_modules/echarts/dist/echarts.js"  ]

3. 根模塊中導入NgxEchartsModule模塊

import {NgxEchartsModule} from 'ngx-echarts';

imports: [ NgxEchartsModule ]

4. 組件中使用echarts圖表

(1). HTML - test.component.html

<div echarts [options]="chartOption" class="demo-chart" style="width: 100%; height: 560px;"></div>

(2). TS - test.compont.ts

export class TestComponent implements OnInit {

    // 定義圖表項
   chartOption: any;

    constructor(private _httpClient: HttpClient){}

   ngOnInit() {
    // 查詢圖表所需數據
    this._httpClient.get('路徑').subscribe((data: any) => {
          //圖表項賦值  
           this.chartOption = {
               color = ['#59a1f8', '#78c87d', '#f6d464', '#445285', '#8e67de', '#e36f7e', '#70c9ca', '#d396c6', '#b09e6c', '#4f58d5', '#96a36f'];
                legend = {};
                tooltip = {};
                dataset = {
                    source: data
                };
                xAxis = {type: 'category'};
                yAxis = {};
                series = [
                    {type: 'bar'}
                ];            
            };

        });

}

data數據格式:

[

    ["發佈日期","數量"],
    ["2014-03-25",1],
    ["2014-04-04",1],
    ["2014-04-09",1],
    ["2014-04-14",2],
    ["2014-04-17",1]
    ...        

]

5. 重啓程序，瀏覽器訪問:

擴展 --------------------

項目中屢次用到了柱形圖，配置變量options如何作成通用的??

解決方案：

1. 添加模型文件 bar.model.ts

// echart- 柱形圖Option
export class BarOptionModel {
    color = ['#59a1f8', '#78c87d', '#f6d464', '#445285', '#8e67de', '#e36f7e', '#70c9ca', '#d396c6', '#b09e6c', '#4f58d5', '#96a36f'];
    legend = {};
    tooltip = {};
    dataset = {
        source: []
    };
    xAxis = {type: 'category'};
    yAxis = {};
    series = [
        {type: 'bar'}
    ];
}

2. 修改test.component.ts以下:

import {BarOptionModel} from '模型文件';

export class TestComponent implements OnInit {

    // 定義圖表項
   chartOption: BarOptionModel;

    constructor(private _httpClient: HttpClient){}

   ngOnInit() {
    // 查詢圖表所需數據
    this._httpClient.get('路徑').subscribe((data: any) => {
        // 配置圖表項
        this.chartOption = new BarOptionModel();
        // 圖表項中添加數據
        this.chartOption.dataset.source = data;
    });

}