vue+echarts实现动态绘制图表

要实现动态绘制图表，可以使用Vue.js做前端框架，使用Echarts.js做图表库。下面是一个简单的实现过程：

1. 在Vue.js中安装Echarts.js。可以通过npm或者cdn的方式来安装。

2. 在Vue.js组件中引入Echarts.js，并初始化一个echarts实例。

3. 在Vue.js的data中定义一个数组，用来存储图表的数据。在mounted生命周期钩子中，设置一个定时器，每隔一段时间就往数据数组中添加一些数据。

4. 在Vue.js的methods中定义一个函数，用来更新图表。在这个函数中，使用echarts实例的setOption方法来更新图表数据。

5. 在Vue.js的template中，添加一个div元素作为图表容器，并设置宽高。在mounted生命周期钩子中，使用echarts实例的init方法初始化图表，并在更新图表数据时调用更新函数。

下面是一个简单的示例代码：

<template>
  <div id="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  data () {
    return {
      chartData: []
    }
  },
  mounted () {
    this.chart = echarts.init(document.getElementById('chart'))
    this.timer = setInterval(() => {
      this.addData()
      this.updateChart()
    }, 1000)
  },
  methods: {
    addData () {
      this.chartData.push(Math.random() * 100)
    },
    updateChart () {
      this.chart.setOption({
        xAxis: {
          type: 'category',
          data: Array.from({ length: this.chartData.length }, (_, i) => i)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.chartData,
          type: 'line'
        }]
      })
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.chart.dispose()
  }
}
</script>