Axhub charts v1.3 如何设置数据
时间: 2024-03-20 07:45:34 浏览: 27
AxhubCharts v1.3 支持多种方式来设置数据。这里我列出两种常用的方式:
1. 直接将数据传递给组件
在组件中设置 data 属性,将数据作为其值传递给组件。例如:
```html
<template>
<div>
<axh-line-chart :data="chartData"></axh-line-chart>
</div>
</template>
<script>
export default {
data() {
return {
chartData: [
{ x: 'Jan', y: 35 },
{ x: 'Feb', y: 28 },
{ x: 'Mar', y: 42 },
{ x: 'Apr', y: 30 },
{ x: 'May', y: 50 },
{ x: 'Jun', y: 40 },
{ x: 'Jul', y: 60 },
{ x: 'Aug', y: 55 },
{ x: 'Sep', y: 45 },
{ x: 'Oct', y: 70 },
{ x: 'Nov', y: 65 },
{ x: 'Dec', y: 80 }
]
}
}
}
</script>
```
在上面的示例中,我们在组件中定义了一个名为 chartData 的属性,它是一个数组,包含了用于绘制折线图的数据。然后将这个数据传递给 axh-line-chart 组件的 data 属性。
2. 使用 API 获取数据
AxhubCharts 提供了多种 API 来获取数据,例如:axios、fetch 等。你可以在组件的 created 钩子函数中调用这些 API 来获取数据,并将数据传递给组件。例如:
```html
<template>
<div>
<axh-line-chart :data="chartData"></axh-line-chart>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
chartData: []
}
},
created() {
axios.get('/api/data').then((res) => {
this.chartData = res.data
})
}
}
</script>
```
在上面的示例中,我们在组件的 created 钩子函数中使用 axios 发送请求获取数据,并将返回的数据赋值给 chartData 属性。然后将这个数据传递给 axh-line-chart 组件的 data 属性。
希望以上两种方式能够帮到您。
相关推荐
![rplib](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)