vue实现echarts波动效果

实现基础图表

在Vue项目中安装ECharts依赖：

npm install echarts --save

引入ECharts并初始化基础折线图：

import * as echarts from 'echarts';

export default {
  mounted() {
    const chartDom = this.$refs.chart;
    const myChart = echarts.init(chartDom);

    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    };

    myChart.setOption(option);
  }
}

添加波动动画效果

使用ECharts的animation配置实现基础动画：

series: [{
  data: [820, 932, 901, 934, 1290, 1330, 1320],
  type: 'line',
  smooth: true,
  animation: true,
  animationDuration: 2000,
  animationEasing: 'bounceOut'
}]

实现数据波动更新

创建定时更新数据的逻辑：

data() {
  return {
    chartData: [820, 932, 901, 934, 1290, 1330, 1320],
    myChart: null
  }
},
methods: {
  updateData() {
    this.chartData = this.chartData.map(
      item => item + (Math.random() * 200 - 100)
    );
    this.myChart.setOption({
      series: [{
        data: this.chartData
      }]
    });
  }
},
mounted() {
  this.myChart = echarts.init(this.$refs.chart);
  setInterval(this.updateData, 2000);
}

高级波动效果配置

实现更复杂的波浪效果：

series: [{
  type: 'line',
  showSymbol: false,
  data: this.chartData,
  smooth: true,
  lineStyle: {
    width: 3,
    color: '#5470C6'
  },
  areaStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
      { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
    ])
  },
  animationDurationUpdate: 1000,
  animationEasingUpdate: 'cubicInOut'
}]

性能优化建议

对于高频更新的图表，建议启用增量渲染：

setOption(newOption, {
  notMerge: false,
  lazyUpdate: true
});

添加resize监听确保响应式：

window.addEventListener('resize', () => {
  this.myChart.resize();
});

完整组件示例

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

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chartData: [820, 932, 901, 934, 1290, 1330, 1320],
      myChart: null
    }
  },
  methods: {
    updateData() {
      this.chartData = this.chartData.map(
        item => Math.max(200, item + (Math.random() * 200 - 100))
      );
      this.myChart.setOption({
        series: [{
          data: this.chartData
        }]
      });
    },
    initChart() {
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          min: 0
        },
        series: [{
          data: this.chartData,
          type: 'line',
          smooth: true,
          animation: true,
          animationDurationUpdate: 1000,
          lineStyle: {
            width: 3
          },
          areaStyle: {
            opacity: 0.3
          }
        }]
      };

      this.myChart.setOption(option);
      setInterval(this.updateData, 2000);
    }
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chart);
    this.initChart();
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  }
}
</script>