写个demo 展示VUE 中动态修改echarts的data

好的，我可以为您提供一个示例代码，您可以按照以下步骤操作：

1.安装 ECharts：通过命令 npm install echarts 安装 ECharts.

2.在 Vue 组件中导入 ECharts：通过 import echarts from 'echarts' 将 ECharts 导入到 Vue 组件中。

3.在 Vue 组件的 template 中添加 ECharts 容器：通过添加 <div id="chart"></div> 元素，在页面中添加一个用于显示 ECharts 的容器。

4.初始化 ECharts：在 Vue 组件的 mounted 周期方法中，使用 ECharts.init() 方法初始化 ECharts。

5.设置 ECharts 的参数和数据：通过设置 ECharts 的 option 属性，设置 ECharts 的参数和数据。

6.实时修改 ECharts 的数据：使用 ECharts 的 setOption() 方法实时修改 ECharts 的数据。

下面是一个简单的示例代码，您可以参考一下：

<template>
<div id="chart" style="width: 100%; height: 300px;"></div>
</template>

<script>
import echarts from 'echarts'

export default {
name: 'EchartsDemo',
data() {
return {
chartData: [10, 20, 30, 40, 50],
}
},
mounted() {
this.chart = echarts.init(document.getElementById('chart'))
this.setOption()
setInterval(() => {
this.updateData()
}, 2000)
},
methods: {
setOption() {
this.chart.setOption({
title: {
text: 'ECharts 入门示例',
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E'],
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: this.chartData,
},
],
})
},
updateData() {
this.chartData = this.chartData.map((item) => Math.ceil(Math.random() * 100))
this.setOption()
},
},
}
</script>

注意：在示例代码中，我使用了 setInterval() 方法定时更新 ECharts 的数据，您可以根据自己的需求修改更新数据的方式。另外，如果您想要了解更多关于 Echarts 的用法和 API，请参考官方文档。