溫馨提示×

vue+echart data中的數(shù)據(jù)動態(tài)賦值

vue
小億
281
2023-12-19 09:27:54
欄目: 編程語言

要在Vue和EChart中動態(tài)賦值數(shù)據(jù)，可以按照以下步驟進行操作：

  1. 在Vue組件的data中定義一個空數(shù)組，用于存儲動態(tài)數(shù)據(jù)，例如：
data() {
  return {
    chartData: []
  }
}
  1. 在Vue組件的created或mounted生命周期鉤子中，通過異步請求或其他方式獲取數(shù)據(jù)，并將數(shù)據(jù)賦值給chartData數(shù)組，例如：
created() {
  // 異步請求數(shù)據(jù)
  fetchData().then(response => {
    // 將返回的數(shù)據(jù)賦值給chartData數(shù)組
    this.chartData = response.data
  })
}
  1. 在EChart的配置中，將chartData數(shù)組作為數(shù)據(jù)源，例如：
option: {
  xAxis: {
    data: this.chartData.map(item => item.x)
  },
  yAxis: {
    data: this.chartData.map(item => item.y)
  },
  series: [{
    data: this.chartData.map(item => item.value)
  }]
}

通過以上步驟，Vue和EChart中的數(shù)據(jù)就可以動態(tài)賦值了。

0 踩