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

标签：10,20,echart,xxx,更新,echarts,data,angular
来源： https://www.cnblogs.com/yehuisir/p/16126702.html