vue实现echarts图片运动

实现 Vue 中 ECharts 图片动画效果

在 Vue 项目中集成 ECharts 并实现动态图表效果，可以通过以下方式完成。假设已安装 Vue 和 ECharts 依赖。

安装 ECharts 依赖

通过 npm 或 yarn 安装 ECharts：

npm install echarts --save

基础集成与动画配置

在 Vue 组件中引入 ECharts 并初始化图表，通过配置项启用动画效果：

<template>
  <div ref="chartContainer" 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.chartContainer);
      const option = {
        animation: true, // 启用全局动画
        animationDuration: 1000, // 动画时长（毫秒）
        animationEasing: 'cubicInOut', // 缓动效果
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: { type: 'value' },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 1, color: '#188df0' }
            ])
          },
          emphasis: { itemStyle: { color: '#188df0' } },
          animationDelay: function (idx) {
            return idx * 100; // 数据项动画延迟
          }
        }]
      };
      chart.setOption(option);
    }
  }
};
</script>

动态数据更新动画

通过定时器或异步请求更新数据，触发重新渲染动画：

methods: {
  updateData() {
    const chart = echarts.getInstanceByDom(this.$refs.chartContainer);
    const newData = [90, 150, 200, 60, 50, 100, 160];
    chart.setOption({
      series: [{
        data: newData,
        animationDurationUpdate: 1000, // 数据更新动画时长
        animationEasingUpdate: 'quarticInOut' // 更新缓动效果
      }]
    });
  }
}

路径动画（如折线图动态绘制）

配置 line 系列的动画属性实现路径绘制效果：

series: [{
  type: 'line',
  data: [120, 200, 150, 80, 70, 110, 130],
  symbol: 'circle',
  symbolSize: 8,
  itemStyle: { color: '#f84545' },
  lineStyle: { width: 3 },
  animationDuration: 2000,
  animationEasing: 'elasticOut'
}]

注意事项

• 确保在组件销毁时调用 echarts.dispose() 清理实例：

  beforeDestroy() {
    const chart = echarts.getInstanceByDom(this.$refs.chartContainer);
    if (chart) chart.dispose();
  }

• 响应式适配需监听窗口变化并调用 chart.resize()。
• 复杂动画可结合 ECharts 的 graphic 组件自定义图形动画。