溫馨提示×

vue+echart data中的數據動態賦值

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

要在Vue和EChart中動態賦值數據,可以按照以下步驟進行操作:

  1. 在Vue組件的data中定義一個空數組,用于存儲動態數據,例如:
data() {
  return {
    chartData: []
  }
}
  1. 在Vue組件的created或mounted生命周期鉤子中,通過異步請求或其他方式獲取數據,并將數據賦值給chartData數組,例如:
created() {
  // 異步請求數據
  fetchData().then(response => {
    // 將返回的數據賦值給chartData數組
    this.chartData = response.data
  })
}
  1. 在EChart的配置中,將chartData數組作為數據源,例如:
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中的數據就可以動態賦值了。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女