Angular ngx-echarts图表

标签：格式   save   model   赋值   修改   组件   top   legend   private   

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;
    });

}   

Angular ngx-echarts图表

标签：格式   save   model   赋值   修改   组件   top   legend   private   

原文地址：https://www.cnblogs.com/zero-zm/p/10014633.html