echart折线图动感设计

效果：

起由：

需求设计大大觉得EChart图表的折线图太过于死板，没有交互感，希望可以实现上图的效果，经过一顿摸索发现EChart折线图effect属性可以让光点沿着折线的路径移动，从而实现动态效果，注意这个“波动的光条”的轨迹这会走两点间的最短距离。

学习啦：

EChart的effect属性：

 show:控制是否显示动态效果,类型：Boolean

   constantSpeed:设置动态效果的流动速度（单位为像素/秒）。设置该属性后，动画速度将固定为该值，而不是随着图表的大小变化，类型：Number

 trailLength：控制光点拖尾的长度。取值范围为 [0, 1]，值越大，拖尾越长；值越小，拖尾越短，类型：Number

 symbol：设置光点的形状。可以使用预定义的形状（如 'circle'、 'arrow '、'rect'），或者指定图片路径作为自定义图标，类型：String

 symbolSize:设置光点的大小，可以是数字或数组（如 [width, height]）

   shadowBlur:设置光点的阴影模糊半径，适合用来增强光点的发光效果.

   shadowColor:设置光点的阴影颜色。

代码一：

<template>
  <!-- 图表容器 -->
  <div ref="chartContainer" style="width: 800px; height: 400px;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

// 定义图表容器的引用
const chartContainer = ref(null);

onMounted(() => {
  // 初始化 ECharts 实例
  const myChart = echarts.init(chartContainer.value);

  // 配置图表的选项
  const option = {
    backgroundColor: '#0a2e36', // 深色背景
    xAxis: {
      type: 'category',
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
      boundaryGap: false, // 不留白
      axisLine: { lineStyle: { color: '#aaa' } }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#aaa' } }
    },
    series: [
      {
        type: 'line',
        data: [20, 50, 35, 70, 90, 40, 65, 30, 50, 60],
        lineStyle: {
          width: 3,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: 'rgba(0, 255, 255, 0.6)' },
              { offset: 1, color: 'rgba(0, 100, 255, 0.6)' }
            ]
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(0, 150, 255, 0.2)' },
              { offset: 1, color: 'rgba(0, 150, 255, 0)' }
            ]
          }
        }
      },
      {
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        polyline: true,
        effect: {
          show: true,
          constantSpeed: 80,    // 较低速度让移动更平滑
          trailLength: 0.7,     // 较长拖尾以增加流动感
          symbol: 'circle',     // 使用圆形光点
          symbolSize: 10,       // 光点的大小
          color: 'rgba(255, 255, 255, 0.8)', // 光点的颜色
          shadowBlur: 0, //光条背景轨迹宽度
          shadowColor: 'rgba(255, 255, 255, 0.1)' //光条背景轨迹颜色
        },
        lineStyle: {
          opacity: 0 // 隐藏 `lines` 的线，只显示光点效果
        },
        data: [
          {
            coords: [
              [0, 20], [1, 50], [2, 35], [3, 70], [4, 90],
              [5, 40], [6, 65], [7, 30], [8, 50], [9, 60]
            ] // 跟随折线图的坐标轨迹
          }
        ]
      }
    ]
  };

  // 设置图表的配置选项
  myChart.setOption(option);
});
</script>

<style scoped>
/* 为图表组件设置样式 */
</style>

代码二：

<template>
  <div ref="chartRef" style="width: 800px; height: 400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chartRef = ref(null); // 用于引用图表 DOM 元素

onMounted(() => {
  // 初始化数据
  const data = [
    [0, 820],
    [1, 932],
    [2, 901],
    [3, 934],
    [4, 1290],
    [5, 1330],
    [6, 1320]
  ];
  const xAxisData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];

  // 配置选项
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        type: 'line',
        data: data.map(item => item[1]), // 仅用作背景的折线图
        smooth: true,
        lineStyle: {
          width: 2,
          color: 'rgba(100, 100, 255, 0.3)' // 浅蓝色，低透明度的线段
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(100, 150, 255, 0.2)' },
              { offset: 1, color: 'rgba(100, 150, 255, 0)' }
            ]
          }
        }
      },
      {
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        polyline: true,
        effect: {
          show: true,
          constantSpeed: 100, // 光点的移动速度
          trailLength: 0.3, // 光点的拖尾长度
          symbol: 'circle', // 光点的形状
          symbolSize: 10, // 光点的大小
          color: 'rgba(255, 255, 0, 1)', // 亮黄色光点
          shadowBlur: 10, // 增加光点的光晕效果
          shadowColor: 'rgba(255, 255, 0, 0.8)' // 光点光晕颜色
        },
        lineStyle: {
          opacity: 0 // 隐藏原本的线条，只显示光点效果
        },
        data: [
          {
            coords: data
          }
        ]
      }
    ]
  };

  // 初始化 ECharts 实例并设置选项
  const chart = echarts.init(chartRef.value);
  chart.setOption(option);
});
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>