vue实现echarts波动效果

实现基础图表

在Vue项目中安装Echarts依赖，通过npm或yarn添加echarts库。在组件中引入Echarts并初始化一个基础图表，确保DOM容器具有明确的宽度和高度。

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

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      chart.setOption({
        xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] },
        yAxis: { type: 'value' },
        series: [{ data: [120, 200, 150, 80], type: 'line' }]
      });
    }
  }
};
</script>

添加波动动画效果

利用Echarts的animation配置项实现波动效果。通过设置animationDuration和animationEasing控制动画速度和缓动函数，结合series.line.animation启用线条动画。

chart.setOption({
  animationDuration: 2000,
  animationEasing: 'elasticOut',
  series: [{
    type: 'line',
    data: [120, 200, 150, 80],
    animation: true,
    lineStyle: { width: 3, color: '#5470C6' }
  }]
});

动态数据更新模拟波动

通过定时器动态更新数据，模拟实时波动的效果。使用setInterval定期生成随机数据，并调用chart.setOption更新图表。

data() {
  return { chart: null, timer: null };
},
methods: {
  initChart() {
    this.chart = echarts.init(this.$refs.chart);
    this.updateData();
    this.timer = setInterval(this.updateData, 1500);
  },
  updateData() {
    const newData = Array(4).fill(0).map(() => Math.random() * 200);
    this.chart.setOption({ series: [{ data: newData }] });
  },
  beforeDestroy() { clearInterval(this.timer); }
}

自定义波浪样式

通过series.symbol和series.itemStyle自定义数据点的样式，增强波动视觉效果。例如使用圆形符号和渐变颜色填充。

series: [{
  symbol: 'circle',
  symbolSize: 10,
  itemStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#83bff6' },
      { offset: 1, color: '#188df0' }
    ])
  }
}]

响应式调整

监听窗口大小变化并调用Echarts的resize方法，确保图表自适应容器尺寸。

mounted() {
  this.initChart();
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() { this.chart?.resize(); }
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}