echarts写成动态数据
时间: 2023-06-30 12:21:23 浏览: 41
ECharts 支持动态数据的更新,只需要在设置图表数据的时候,将数据传入 `setOption` 方法即可。以下是一个示例代码:
```html
<template>
<div class="container">
<div class="chart-container" ref="chart"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
chartData: [820, 932, 901, 934, 1290, 1330, 1320]
}
},
mounted() {
this.renderChart()
setInterval(() => {
this.updateChartData()
}, 1000)
},
methods: {
renderChart() {
const chart = echarts.init(this.$refs.chart)
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: this.chartData,
type: 'line'
}]
}
chart.setOption(option)
},
updateChartData() {
// 模拟数据更新
this.chartData = this.chartData.map(item => item + Math.round(Math.random() * 200 - 100))
// 更新图表数据
const chart = echarts.init(this.$refs.chart)
chart.setOption({
series: [{
data: this.chartData
}]
})
}
}
}
</script>
<style>
.container {
width: 100%;
height: 100%;
}
.chart-container {
width: 100%;
height: 100%;
}
</style>
```
以上示例代码中,通过设置 `chartData` 数据来存储折线图的数据,然后在 mounted 钩子函数中,调用 `renderChart` 方法来渲染图表,并且通过 `setInterval` 函数模拟数据更新。在 `updateChartData` 方法中,通过更新 `chartData` 数据来模拟数据更新,然后使用 `setOption` 方法来更新图表数据。其中,通过设置 `series` 的 `data` 属性来更新折线图的数据。
需要注意的是,在使用 `setOption` 方法更新图表数据时,需要重新初始化 `chart` 对象。因为在第一次调用 `renderChart` 方法时,已经初始化了 `chart` 对象,并将图表渲染到了页面上,如果不重新初始化 `chart` 对象,会导致图表数据不能正常更新。