angular中使用echarts並實現數據更新

第一個echart圖像

1.在創建的angular項目終端中輸入如下命令安裝echart包。

npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts

2.在app.module.ts中導入echart。

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  imports: [
    ...,
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts')
    })
  ],
})
export class AppModule { }

3.在xxx.html中准備一個div盒子，用於放置echart圖像。

<div echarts [options]="BarOption" class="chart"></div>

4.[option]接口傳遞echart配置參數，在xxx.ts中通過配置BarOption可以設置echart圖像的樣式。

export class AppComponent implements OnInit {
    barOption: any;
    constructor() { };
    ngOnInit(): void {
        this.barOption = {title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
    }

option的配置項可以參考官網，有各種配置項的詳細說明。

 

 5.繪制好的echart圖像如下圖所示。

 

 

若echart圖像中的data發生了變化，

例如剛開始series中的data:[5, 20, 36, 10, 10, 20]，

series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]

現在希望變成[34,16,27,31,25,19]，該怎么進行更新呢？

newData=[34,16,27,31,25,19];

數據更新

1.在xxx.html中添加更換數據按鈕。

<div echarts [options]="barOption" class="chart" (chartInit)="onChartInit($event)"></div>
<button (click)="changeData()">更換數據</button>

其中，onChartInit($event)方法可以用來獲取echart實例。

2.在xxx.ts中獲取echart實例。

echartsInstance: any;
onChartInit(ec) {
    this.echartsInstance = ec;
  }

此時的echartsInstance即為一個echart實例，可以進行setOption等相關操作。

3.在xxx.ts中編寫更換數據函數。

newData = [34, 16, 27, 31, 25, 19];
changeData() {
  this.barOption.series[0].data = this.newData;
  this.echartsInstance.setOption(this.barOption);
}

4.界面中點擊更換數據按鈕后，echart圖像數據成功更新。

 

 數據更新后的圖像：

 

 轉載：https://blog.csdn.net/m0_52457734/article/details/114268258