更新数据变化的echart答案

【问题标题】：Update echart on data change更新数据变化的echart
【发布时间】：2021-02-15 08:53:21
【问题描述】：

我正在寻找一种解决方案来在新数据进入时更新 echart。目前我有一个图表和一个包含一些数据的下拉菜单。当我打开页面时，数据在图表上显示得非常好。但是当我使用下拉菜单并将选项更改为下一个数据时，什么都没有发生。之前的数据还在图表上。任何想法如何在数据更改时更新图表（对象）？

我的代码：

chart1: EChartOption = {
tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow'
  }
},
legend: {
  data: ['Tests Open','Tests Approved', 'Tests Failed']
},
toolbox: {
  show: true,
  feature: {
    mark: { show: true },
    magicType: { title: '1', show: true, type: ['line', 'bar',] },
    restore: { title: 'Restore', show: true },
    saveAsImage: { title: 'Save Chart',show: true }
  }
},
xAxis: [
  {
    type: 'category',
    axisTick: { show: false },
    data: []
  }
],
yAxis: [
  {
    type: 'value'
  }
],
series: [
  {
    name: 'Tests Open',
    type: 'bar',
    data: [],
    itemStyle: {
      color: '#FDD051'
    }
  },
  {
    name: 'Tests Approved',
    type: 'bar',
    data: [],
    itemStyle: {
      color: '#2EAD6D'
    }
  },
  {
    name: 'Tests Failed',
    type: 'bar',
    data: [],
    itemStyle: {
      color:'#F0533F'
    }
  },
]

};

refreshChart(statistics: TestResultSiteStatistics) : void {
let months = [];
let open = [];
let approved = []; 
let failed = [];
for (let month in statistics.monthly){
  months.push(month);
  approved.push(statistics.monthly[month].approved);
  open.push(statistics.monthly[month].open);
  failed.push(statistics.monthly[month].failed);
}
this.chart1.xAxis[0].data = months;
this.chart1.series[0].data = open;
this.chart1.series[1].data = failed;
this.chart1.series[2].data = approved;

}

<div #chart style="height:590px; width:1190px;" echarts [options]="chart1" ></div>

【问题讨论】：

标签： html angular typescript echarts

【解决方案1】：

您不能直接向实例添加数据，因为 Echarts 封装了复杂的逻辑来处理数据。您需要使用方法myChart.setOption({series: [new_data]})。它在 API 文档中进行了解释：https://echarts.apache.org/en/api.html#echartsInstance.setOption 和 https://echarts.apache.org/en/tutorial.html#Loading%20and%20Updating%20of%20Asynchronous%20Data

【讨论】：