时间戳

首页 > 解决方案 > 更新数据变化的echart

html - 更新数据变化的echart

问题描述

我正在寻找一种解决方案来在新数据进入时更新 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>

标签： htmlangulartypescriptecharts

解决方案

您不能直接向实例添加数据，因为 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% 20异步%20数据

推荐阅读