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

小鱼儿心语：别有事没事跟别人诉苦，这世上没有感同身受，只有冷暖自知，大部分人听听也就烦了，还有少部分人会背着你当做笑柄到处宣传。

先来看效果图吧：

最高点闪烁.png

废话不多说，上代码：

// 库存趋势
    getstock() {
      this.$http.get('/bigdata/despatch/stockTrend').then((res) => {
        res = res.data
        if (res.code == 200) {
          var stock = echarts.init(document.getElementById('stock'))
          let bgColor = '#04081100'
          let color = [
            '#fe9d01',
            '#36CE9E',
            '#EE8931',
            '#FF515A',
            '#8B5CFF',
            '#00CA69'
          ]
          let echartData = []
          res.data.timeList.forEach((item, index) => {
            echartData.push({
              name: item,
              value1: res.data.valList[index]
            })
          })
          let xAxisData = echartData.map((v) => v.name)
          let yAxisData1 = echartData.map((v) => v.value1)
          // 数组去重
          const map = new Map()
          const qc = echartData.filter(
            (key) => !map.has(key.value1) && map.set(key.value1, 1)
          )
          qc.sort(this.compare('value1'))
          // 最高点或最低点得数据
          let effectScatterData = []
          effectScatterData.push({ name: qc[0].name, value: qc[0].value1 })
          var option1 = {
            backgroundColor: bgColor,
            color: color,
            legend: {
              center: true,
              top: 10,
              show: false,
              data: ['库存趋势'],
              textStyle: {
                color: '#00DEFF'
              }
            },
            tooltip: {
              show: true,
              trigger: 'item',
              textStyle: {
                color: '#666'
              },
              formatter: '{a} 
{b} : {c} 万吨'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '2%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  show: false
                },
                boundaryGap: false, // 不留白，从原点开始
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: 'solid',
                    color: 'rgba(255, 255, 255,0.7)'
                  }
                },
                axisLabel: {
                  inside: false,
                  textStyle: {
                    color: 'rgba(255, 255, 255,0.7)', // x轴颜色
                    fontWeight: 'normal',
                    fontSize: '14',
                    lineHeight: 22
                  }
                },

                data: xAxisData
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '单位：次',
                axisLabel: {
                  textStyle: {
                    color: 'rgba(255, 255, 255,0.7)'
                  }
                },
                nameTextStyle: {
                  color: 'rgba(255, 255, 255,0.7)',
                  fontSize: 12,
                  lineHeight: 40,
                  padding: [0, 0, 0, -20]
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.3)'
                  }
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    type: 'solid',
                    color: 'rgba(255, 255, 255,1)'
                  }
                },
                axisTick: {
                  show: false
                }
              }
            ],
            series: [
              {
                name: '库存趋势',
                type: 'line',
                smooth: true, //是否平滑
                // showSymbol: false,/
                symbolSize: 2,
                zlevel: 1,
                lineStyle: {
                  normal: {
                    color: color[0],
                    // shadowBlur: 1,
                    shadowColor: '#f5f503',
                    shadowBlur: 10
                    // shadowColor: hexToRgba(color[0], 0.3),
                    // shadowOffsetY: 8
                  }
                },
                markPoint: {
                  symbol:
                    'path://M170.666667 85.333333 853.333333 85.333333C900.266667 85.333333 938.666667 123.733333 938.666667 170.666667L938.666667 682.666667C938.666667 729.6 900.266667 768 853.333333 768L682.666667 768 512 938.666667 341.333333 768 170.666667 768C123.733333 768 85.333333 729.6 85.333333 682.666667L85.333333 170.666667C85.333333 123.733333 123.733333 85.333333 170.666667 85.333333Z',
                  symbolKeepAspect: false,
                  symbolSize: [70, 40],
                  symbolOffset: [0, -36],
                  silent: false,
                  itemStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#0285bf' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#0285bf' // 100% 处的颜色
                        }
                      ],
                      globalCoord: false // 缺省为 false
                    }
                  },
                  label: {
                    show: true,
                    offset: [0, -3],
                    formatter: '库存：\n{c}万吨', //单位
                    textStyle: {
                      color: '#fff'
                    }
                  },
                  data: [
                    {
                      type: 'max',
                      name: '最大值'
                    }
                  ]
                },
                data: yAxisData1
              },
-----------------------------------------------------设置涟漪特效动画---------------------------------------------------------------
              {
                // 设置涟漪特效动画
                type: 'effectScatter',
                // 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2d
                coordinateSystem: 'cartesian2d',
                // 单个闪烁点 ↓
                data: [
                  {
                    value: [
                      effectScatterData[0].name,
                      effectScatterData[0].value
                    ],
                    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',
                  period: 2, //动画的时间。
                  scale: 3.5 //动画中波纹的最大缩放比例。
                },
                hoverAnimation: true,
                itemStyle: {
                  normal: {
                    color: '#f5f503',
                    shadowBlur: 20,
                    shadowColor: '#fff'
                  }
                },
                zlevel: 1
              }
            ]
          }
          stock.setOption(option1)
        }
      })
    },

希望能够帮助到大家，有什么疑问可以留言给我哦(●'◡'●)