效果：
起由：
需求设计大大觉得EChart图表的折线图太过于死板，没有交互感，希望可以实现上图的效果，经过一顿摸索发现EChart折线图effect属性可以让光点沿着折线的路径移动，从而实现动态效果，注意这个“波动的光条”的轨迹这会走两点间的最短距离。
学习啦：
EChart的effect属性：
show:控制是否显示动态效果,类型：BooleanconstantSpeed:设置动态效果的流动速度（单位为像素/秒）。设置该属性后，动画速度将固定为该值，而不是随着图表的大小变化，类型：
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>
