ECharts 是一款非常强大的可视化图表库，它支持多种类型的图表展示，并提供了丰富的交互方式和动画效果。在
Vue 中使用
ECharts 非常方便，只需要引入
echarts 和
vue-
echarts 即可。
动态更新
ECharts 数据的方法有多种，下面介绍两种比较常见的方式。
方法一：使用
ECharts 的 setOption 方法
ECharts 提供了 setOption 方法，可以用来更新图表
数据。我们可以通过在
Vue 中监听
数据变化，然后调用 setOption 方法更新图表
数据。
示例代码如下：
```
<template>
<div id="chart"></div>
</template>
<script>
import
echarts from '
echarts'
import {
VueECharts } from '
vue-
echarts'
export default {
components: {
VueECharts
},
data() {
return {
chartData: {
// 初始
数据
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
methods: {
initChart() {
this.chart =
echarts.init(document.getElementById('chart'))
this.chart.setOption(this.chartData)
},
updateChart() {
// 更新
数据
this.chartData.series[0].data = [randomData(), randomData(), randomData(), randomData(), randomData(), randomData(), randomData()]
// 调用 setOption 方法更新图表
数据
this.chart.setOption(this.chartData)
}
}
}
function randomData() {
return Math.floor(Math.random() * 1000)
}
</script>
```
在上面的代码中，我们首先在 data 中定义了初始的图表
数据，然后在 mounted 钩子函数中调用 initChart 方法初始化图表。
在 updateChart 方法中，我们通过修改
数据，然后调用 setOption 方法更新图表
数据。
方法二：使用
ECharts 的动态
数据接口
ECharts 还提供了动态
数据接口，在
数据变化时自动更新图表
数据。我们只需要通过调用 setOption 方法传入一个动态
数据接口，就可以实现图表
数据的动态更新。
示例代码如下：
```
<template>
<div id="chart"></div>
</template>
<script>
import
echarts from '
echarts'
import {
VueECharts } from '
vue-
echarts'
export default {
components: {
VueECharts
},
data() {
return {
option: {
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'line'
}]
},
dataUrl: 'data.json',
timer: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
methods: {
initChart() {
this.chart =
echarts.init(document.getElementById('chart'))
this.chart.setOption(this.option)
this.getData()
// 每隔一段时间更新
数据
this.timer = setInterval(() => {
this.getData()
}, 5000)
},
getData() {
// 通过 axios 获取
数据
axios.get(this.dataUrl).then(res => {
const data = res.data
// 更新 option 中的
数据
this.option.xAxis.data = data.map(item => item.time)
this.option.series[0].data = data.map(item => item.value)
// 调用 setOption 方法更新图表
数据
this.chart.setOption(this.option, true)
})
}
},
destroyed() {
clearInterval(this.timer)
}
}
</script>
```
在上面的代码中，我们首先在 data 中定义了 option、dataUrl 和 timer 三个变量。option 用于存储图表的配置项和
数据，dataUrl 用于存储获取
数据的接口地址，timer 用于存储定时器，用于定时更新
数据。
在 initChart 方法中，我们首先初始化图表，然后调用 getData 方法获取初始
数据，并启动定时器定时更新
数据。
在 getData 方法中，我们通过 axios 获取
数据，并更新 option 中的
数据，然后调用 setOption 方法更新图表
数据。同时，我们还传入了 true 参数，表示采用动态
数据接口的方式更新
数据。
最后，在 destroyed 钩子函数中，我们清除定时器，防止内存泄漏。
最低0.47元/天 解锁文章
840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
