vue封装echarts传值实时刷新

为了实现Vue中封装Echarts并实现实时刷新，可以按照以下步骤进行：

1. 在Vue的组件中引入Echarts依赖：

import echarts from 'echarts'

2. 在组件中创建Echarts实例并设置参数：

export default {
  data() {
    return {
      chartData: null, // Echarts数据
      chart: null // Echarts实例
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart) // 创建Echarts实例
      this.chart.setOption({ // 设置Echarts参数
        // ...
      })
    }
  }
}

3. 在组件中创建一个方法，用于更新Echarts数据，并在数据更新后重新渲染Echarts图表：

export default {
  // ...
  methods: {
    updateChartData(data) {
      this.chartData = data // 更新Echarts数据
      this.chart.setOption({ // 重新渲染Echarts图表
        // ...
        series: [{
          data: this.chartData
        }]
      })
    }
  }
}

4. 在父组件中调用子组件的方法，传递数据更新Echarts图表：

<template>
  <div>
    <my-chart ref="chartRef"></my-chart>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
import MyChart from './MyChart.vue'

export default {
  components: {
    MyChart
  },
  methods: {
    updateData() {
      const chartRef = this.$refs.chartRef
      const data = [/* 新数据 */]
      chartRef.updateChartData(data) // 调用子组件的方法更新Echarts图表
    }
  }
}
</script>

这样，每当父组件中的数据更新时，调用子组件的方法更新Echarts图表，从而实现了Echarts的实时刷新。