echarts中,在折线图中对数据点实现闪烁/闪亮功能(涟漪图-effectScatter)

本文链接：https://blog.youkuaiyun.com/qq_37146616/article/details/123327059

本文介绍如何在ECharts折线图中使用effectScatter组件创建数据闪烁效果，重点讲解配置项如坐标系、数据格式和涟漪特效参数。适合希望通过视觉反馈增强图表展示的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近需要实现一个, 在折线图中要对数据进行一个闪烁显示的功能. 用到的是ecahrts的effectScatter.
在ecahrts中, 关于涟漪图-effectScatter的文档在此链接可以进行查阅

实现图:
在这里插入图片描述

let opt = {
	...
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      // splitLine :{    //网格线
      //   lineStyle:{
      //     type:'dashed',    //设置网格线类型 dotted：虚线   solid:实线
      //     color: '#297A7D'
      //   },
      //   show:true //隐藏或显示
      // },
      // axisLabel: { // x轴的刻度标签设置
      //   show: true,
      //   textStyle: {
      //     color: '#68E2E6'
      //   },
      //   fontSize:15,  
      // },
    },
    yAxis: {
      ...
      type: 'value',
      // splitLine :{    //网格线
      //   lineStyle:{
      //     type:'dashed',    //设置网格线类型 dotted：虚线   solid:实线
      //     color: '#297A7D'
      //   },
      //   show:true //隐藏或显示
      // },
      // axisLabel: { // x轴的刻度标签设置
      //   show: true,
      //   textStyle: {
      //     color: '#68E2E6'
      //   },
      //   fontSize:15,  
      // },
    },
    series: [
        {
            data:  [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        },
        // 闪烁点的重点是以下配置
        {
        	  // 设置涟漪特效动画
              type:'effectScatter',
              // 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2d
              coordinateSystem: 'cartesian2d',
              // 单个闪烁点 ↓
              data: [{value:['Mon',820],symbolSize:8}], //2d坐标系--[x轴, y轴, 标记大小]
              
              // 多个闪烁点 ↓
              // 方法一 -- start:
              // data: [{value:['Mon',820],symbolSize:10},{value:['Tue',932],symbolSize:10}], 
      		  // 方法一 -- end
      		  
              // 方法二 -- start:
              // data: [['Mon',820],['Tue',932]], //2d坐标系--[x轴, y轴, 标记大小]
      		  // symbolSize: 10,
      		  // 方法二 -- end
      		  
              // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
              showEffectOn: 'render',
              // 涟漪特效配置
              rippleEffect: {
                // 波纹的绘制方式,可选'stroke'和'fill'
                brushType: 'stroke'
              },
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  color: '#fff',
                  shadowBlur: 30,
                  shadowColor: '#fff'
                }
              },
              zlevel:1
            }
    ]
};