vue-echarts 更新数据
时间: 2023-07-21 21:27:17 浏览: 245
要更新 Vue-Echarts 中的数据,可以通过以下步骤:
1. 在 Vue 组件中引入 Echarts:
```
import echarts from 'echarts'
```
2. 在 Vue 组件中引入 Vue-Echarts:
```
import ECharts from 'vue-echarts/components/ECharts.vue'
```
3. 在 Vue 组件中注册 Echarts 组件:
```
components: {
'v-chart': ECharts
}
```
4. 在 Vue 组件中使用 Echarts 组件,并将数据传递给它:
```
<template>
<v-chart :options="options"></v-chart>
</template>
<script>
export default {
data () {
return {
options: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
}
}
},
methods: {
updateData () {
// 更新数据
this.options.series[0].data = [150, 120, 200, 80, 90, 130, 110]
}
}
}
</script>
```
5. 在需要更新数据的时候,调用 `updateData()` 方法即可。
阅读全文