在vue中echarts展示动态变换的数据

在Vue中使用Echarts展示动态变化的数据，可以通过以下步骤实现：

1. 安装Echarts

npm install echarts --save

2. 引入Echarts

在需要使用Echarts的组件中，引入Echarts：

import echarts from 'echarts'

3. 创建Echarts实例

在组件的`mounted()`生命周期函数中，创建Echarts实例并初始化：

mounted() {
  this.chart = echarts.init(this.$refs.chart)
  this.chart.setOption({...})
}

其中，`this.$refs.chart`是在模板中定义的Echarts容器。

4. 更新数据

当需要更新数据时，可以通过`setOption()`方法重新设置Echarts实例的配置：

this.chart.setOption({
  series: [{
    data: this.data
  }]
})

其中，`this.data`是动态变化的数据。

完整示例代码：

<template>
  <div class="chart-container" ref="chart"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  data () {
    return {
      chart: null,
      data: [10, 20, 30, 40, 50]
    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.chart)
    this.chart.setOption({
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: this.data,
        type: 'line'
      }]
    })
  },
  methods: {
    updateData () {
      // 模拟数据变化
      this.data = this.data.map(item => item + Math.floor(Math.random() * 20))
      this.chart.setOption({
        series: [{
          data: this.data
        }]
      })
    }
  }
}
</script>