vue+echart data中的数据动态赋值

vue

1375

2023/11/24 9:27:54

栏目: 编程语言

要在Vue和EChart中动态赋值数据，可以按照以下步骤进行操作：

在Vue组件的data中定义一个空数组，用于存储动态数据，例如：

data() {
  return {
    chartData: []
  }
}

在Vue组件的created或mounted生命周期钩子中，通过异步请求或其他方式获取数据，并将数据赋值给chartData数组，例如：

created() {
  // 异步请求数据
  fetchData().then(response => {
    // 将返回的数据赋值给chartData数组
    this.chartData = response.data
  })
}

在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中的数据就可以动态赋值了。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

vue+echart data中的数据动态赋值

最新知识库

相关标签