要是echarts插件重新加载echart图，是调哪个函数。

[pppzhou]

之前echart可以显示了，非常感谢！但是现在想调后台数据来显示，Jhipster项目中已经实现后台数据更新重新加载，然后我将更新后的数据重新赋给echarts，不知道echarts插件中是调哪个函数来重新加载了，比如说：原生JS 中用echarts加载时，是用myechart.setOption这个API来加载配置项。使用echarts插件改怎么重新加载echarts图呢？

[xieziyu]

@pppzhou angular2-echarts 支持两种方式刷新数据：

1. 在chartOptions绑定中更新data属性，需要重载的时候，刷新chartOptions，例如:

   this.chartOptions = Object.assign({}, this.chartOptions);

2. 使用dataset绑定刷新数据，例如：

   // new chart dataset
   this.chartDataset = [];
   // push data from dataSource
   for (let d of dataSource) {
   this.chartDataset.push(d.value);
   }

[pppzhou]

这个Object是echarts的初始化对象吗，我在echarts的div中加了这个(chartInit)="onChartInit($event)"，然后在echarts.component.ts中加了onChartInit(ec) { this.echartsInstance = ec;} ，我在后台数据更新后重新加载echarts，导入this.chartOptions = this.echartInstance.assign({}, this.chartOptions);报错，说assign of undefined。我查过官方API，我之前写过this.echartInstance.setOption(this.chartOptions);但是也报setOption of undefined。是我echarts初始化有问题吗？

[xieziyu]

@pppzhou 请查看demo吧。这里所指的chartOptions是指你自定义的配置对象。这里利用的是angular的数据绑定，所以不需要调用echartsInstance的方法。

[gjhkael]

    for (let i = 0; i < this.userCapacityTopTen.length; i++) {
      this.userCapacityUsagePercentOption.legend.data[i] = this.userCapacityTopTen[i].xxx;
      this.userCapacityUsagePercentOption.series[0].data[i].name = this.userCapacityTopTen[i].xxx;
      this.userCapacityUsagePercentOption.series[0].data[i].value = (Number)((this.userCapacityTopTen[i].usage * 100 / totalUsage).toFixed(1));
    }
    this.userCapacityUsagePercentOption = Object.assign({}, this.userCapacityUsagePercentOption);

从后段获取相应的数据填充完option，数据仍然没有更新，还是初始的option数据。

[xieziyu]

@gjhkael 请问用的是ngx-echarts还是angular2-echarts？ angular2-echarts很早就停止维护了

[gjhkael]

你好，感谢回复

目前使用版本情况： "echarts": "^4.1.0", "ngx-echarts": "^2.1.0", "@angular/core": "^4.4.7”,

注释代码使用的primeng 的chart组件，并且线上运行良好。

option定义如下（拿的demo代码，一点没动过）： userCapacityUsagePercentOption = { title: { text: 'HDFS容量占比', //subtext: 'Mocking Data', x: 'center' }, tooltip: { trigger: 'item', formatter: '{a}
{b} : {c} ({d}%)' }, legend: { x: 'center', y: 'bottom', data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8'] }, calculable: true, series: [ { name: 'area', type: 'pie', radius: [30, 110], roseType: 'area', data: [ { value: 10, name: 'rose1' }, { value: 5, name: 'rose2' }, { value: 15, name: 'rose3' }, { value: 25, name: 'rose4' }, { value: 20, name: 'rose5' }, { value: 35, name: 'rose6' }, { value: 30, name: 'rose7' }, { value: 40, name: 'rose8' } ] } ] }; 页面初始化会调用函数从后段取数据。 ngOnInit() {

this.getUserCapacityTopTen();

} 并且在下面函数已经验证是有数据的。我alert调试过。 public getUserCapacityTopTen(): void { this.dppMonitorUserCapacityService.getUserTopTenRecords().then( res=> { this.userCapacityTopTen = res; let totalUsage : number = 0; for (let i = 0; i < this.userCapacityTopTen.length; i++) { totalUsage += this.userCapacityTopTen[i].usage; } for (let i = 0; i < this.userCapacityTopTen.length; i++) { this.userCapacityUsagePercentOption.legend.data[i] = this.userCapacityTopTen[i].hiveAccount; this.userCapacityUsagePercentOption.series[0].data[i].name = this.userCapacityTopTen[i].hiveAccount; this.userCapacityUsagePercentOption.series[0].data[i].value = (Number)((this.userCapacityTopTen[i].usage * 100 / totalUsage).toFixed(1)); } this.userCapacityUsagePercentOption = Object.assign({}, this.userCapacityUsagePercentOption);

}

).catch(error => this.dppMsgTipService.showError(error, this.msgs)); }

在 2018年6月1日，上午9:53，Xie, Ziyu notifications@github.com 写道：

@gjhkael https://github.com/gjhkael 从代码片段来看是没问题的。请提供一下更完整的代码片段，包括html、component其他的部分。

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/xieziyu/angular2-echarts/issues/14#issuecomment-393734906, or mute the thread https://github.com/notifications/unsubscribe-auth/AKTv5fEeFYbjcBl7ZEqxuDnYN-66Ocjoks5t4J6jgaJpZM4NiN-i.

[gjhkael]

请问你们有完整的能够从后端获取数据，并且更新图表的demo吗？

[xieziyu]

@gjhkael Demo 这个演示里面，用setInterval模拟了动态从后台获取数据的过程，用merge接口可以很好的更新数据。 当然理论上直接更新option同样也会更新数据，你的具体问题我还需再看看

[xieziyu]

@gjhkael 还是无法复现你的问题，我这边模拟测试下来，userCapacityUsagePercentOption 能够正常刷新图

我给了一个demo去尝试模拟你的环境：https://stackblitz.com/edit/angular-dcoe1h

[gjhkael]

貌似找到原因了，@xieziyu 我初始data是8个，而我后端获取的数据有10个，导致可能js出异常了。最后的object 更新没执行。

如下： for (let i = 0; i < 8; i++) { this.userCapacityUsagePercentOption.legend.data[i] = this.userCapacityTopTen[i].hiveAccount; this.userCapacityUsagePercentOption.series[0].data[i].name = this.userCapacityTopTen[i].hiveAccount; this.userCapacityUsagePercentOption.series[0].data[i].value = (Number)((this.userCapacityTopTen[i].usage * 100 / totalUsage).toFixed(1)); } alert(this.userCapacityUsagePercentOption.series[0].data[1].name); 将for 循环指定为8个，最后的alert能够执行，如果我超过8个，就会出异常。是否是个bug？

[gjhkael]

你们有什么规避的方法？我重新对legend.data = [] 和 servies[0].data = [] 初始化也不能解决问题。

[gjhkael]

    this.userCapacityUsagePercentOption.legend.data = [];
    this.userCapacityUsagePercentOption.series[0].data = [];
    for (let i = 0; i < this.userCapacityTopTen.length; i++) {
      this.userCapacityUsagePercentOption.legend.data[i] = this.userCapacityTopTen[i].hiveAccount;
      let value = {value:(Number)((this.userCapacityTopTen[i].usage * 100 / totalUsage).toFixed(1)), name:this.userCapacityTopTen[i].hiveAccount};
      this.userCapacityUsagePercentOption.series[0].data[i] = value;
    }
    this.userCapacityUsagePercentOption = Object.assign({}, this.userCapacityUsagePercentOption);

通过这样解决了上述问题。 前端的坑也挺多的。

[xieziyu]

@gjhkael 好吧，找到问题原因就好。 的确，超过8个的时候，data[i]是个undefined，再访问.name和.value属性的时候，就会抛出异常了。