vue在created里面请求数据,在mounted里面加载echarts
时间: 2023-01-31 11:01:28 浏览: 355
在 Vue 中,可以在组件的 `created` 钩子函数中发起数据请求,在 `mounted` 钩子函数中加载 ECharts。
具体来说,你可以在 `created` 钩子函数中使用 axios 或者 fetch 等方法发起请求,获取数据之后将数据存储在组件的数据中(通常是使用 `data` 选项)。然后在 `mounted` 钩子函数中,使用 ECharts 的 API 将数据渲染成图表。
例如:
```
<template>
<div id="app">
<div ref="chart"></div>
</div>
</template>
<script>
import axios from 'axios';
import echarts from 'echarts';
export default {
data() {
return {
chartData: []
}
},
created() {
axios.get('/api/chart-data').then(response => {
this.chartData = response.data;
});
},
mounted() {
const chart = echarts.init(this.$refs.chart);
chart.setOption({
xAxis: {
data: this.chartData.map(item => item.date)
},
series: [{
data: this.chartData.map(item => item.value)
}]
});
}
}
</script>
```
在上面的代码中,在 `created` 钩子函数中发起了一个请求获取图表数据,并在请求成功后将数据存储在了组件的 `chartData` 中。然后在 `mounted` 钩子函数中使用 ECharts 的 API 将数据渲染成了图表。
阅读全文