vue实现echarts动态数据

Vue 中实现 ECharts 动态数据

安装依赖

确保项目中已安装 ECharts 和 Vue-ECharts（可选）。通过以下命令安装：

npm install echarts vue-echarts

基础集成

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

import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      const option = {
        xAxis: { type: 'category', data: ['A', 'B', 'C'] },
        yAxis: { type: 'value' },
        series: [{ data: [10, 20, 30], type: 'bar' }]
      };
      myChart.setOption(option);
      this.myChart = myChart; // 保存实例
    }
  }
}

模板部分需包含一个容器：

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

动态更新数据

通过定时器或异步请求更新数据：

methods: {
  updateData() {
    const newData = [Math.random() * 100, Math.random() * 100, Math.random() * 100];
    this.myChart.setOption({
      series: [{ data: newData }]
    });
  }
},
created() {
  setInterval(this.updateData, 2000); // 每2秒更新一次
}

响应式数据绑定

结合 Vue 的响应式数据实现动态更新：

data() {
  return {
    chartData: [10, 20, 30]
  };
},
watch: {
  chartData(newVal) {
    this.myChart.setOption({
      series: [{ data: newVal }]
    });
  }
},
methods: {
  changeData() {
    this.chartData = [
      Math.floor(Math.random() * 100),
      Math.floor(Math.random() * 100),
      Math.floor(Math.random() * 100)
    ];
  }
}

使用 Vue-ECharts 简化

通过 vue-echarts 组件更便捷地管理动态数据：

import VueECharts from 'vue-echarts';
export default {
  components: { 'v-chart': VueECharts },
  data() {
    return {
      options: {
        xAxis: { data: ['A', 'B', 'C'] },
        yAxis: {},
        series: [{ data: [10, 20, 30], type: 'bar' }]
      }
    };
  },
  methods: {
    update() {
      this.options.series[0].data = [
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100
      ];
    }
  }
}

模板中使用组件：

<v-chart :option="options" autoresize />

销毁与优化

组件销毁时移除定时器并释放图表资源：

beforeDestroy() {
  if (this.myChart) {
    this.myChart.dispose();
  }
  clearInterval(this.timer);
}

异步数据加载

结合 API 请求动态加载数据：

async fetchData() {
  const res = await axios.get('/api/data');
  this.myChart.setOption({
    series: [{ data: res.data }]
  });
}