VUE框架中动态修改echarts的data并显示

首先，您需要在Vue组件中引入ECharts库。然后，您可以在组件的数据中定义ECharts图表的初始配置和数据。接着，您可以使用Vue的数据绑定功能来动态修改您的数据。最后，通过调用ECharts的API方法来重新绘制图表并显示更新后的数据。以下是一个简单的示例代码：

在模板中定义ECharts图表容器

<template>
  <div>
    <div ref="chart" style="height: 400px;"></div>
  </div>
</template>

在组件中引入ECharts并初始化图表

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      // 初始数据
      chartData: [10, 20, 30, 40, 50],
      // echarts配置
      chartOptions: {
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'bar',
          data: this.chartData
        }]
      }
    };
  },
  mounted() {
    // 初始化echarts图表
    this.chart = echarts.init(this.$refs.chart);
    this.chart.setOption(this.chartOptions);
  }
}
</script>

在数据更新时重新绘制图表

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      // 初始数据
      chartData: [10, 20, 30, 40, 50],
      // echarts配置
      chartOptions: {
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'bar',
          data: this.chartData
        }]
      }
    };
  },
  mounted() {
    // 初始化echarts图表
    this.chart = echarts.init(this.$refs.chart);
    this.chart.setOption(this.chartOptions);
  },
  methods: {
    // 修改数据并重新绘制图表
    updateChartData() {
      this.chartData = [20, 30, 40, 50, 60];
      this.chart.setOption({
        series: [{
          data: this.chartData
        }]
      });
    }
  }
}
</script>