@dfsj/echarts/dist/plugins/Water/waterLayout.js

专业的水文曲线组件或构造函数以及通用的echart二次封装图表

/**
 * 
 *     @dfsj/echarts： 专业的水文曲线组件或构造函数以及通用的echart二次封装图表
 *     版本: v3.7.0-alpha.5
 *     作者：yangbo <1747837358@qq.com>
 *     日期：2025-11-21 13:30:34
 *     
 *     
 */

import * as echarts from 'echarts';
import SimplexNoise from 'simplex-noise';
import clamp from 'lodash-es/clamp';

var simplex = new SimplexNoise();
var WaterLayout = echarts.graphic.extendShape({
  type: 'ec-water',
  shape: {
    height: 0,
    wave: 10,
    amplitude: 5,
    layout: [[0, 100], [1000, 100], [1000, 1000]],
    speedX: 0.05,
    speedY: 0.01,
    phase: 0,
    x: 0,
    y: 0
  },
  buildPath: function buildPath(ctx, shape) {
    shape.x = 0;
    shape.y += shape.speedY;
    var width = shape.layout[1][0] - shape.layout[0][0];
    var start = shape.layout[0];
    for (var i = 0; i <= shape.wave; i++) {
      shape.x += shape.speedX;
      var n = simplex.noise2D(shape.x, shape.y) * shape.amplitude;
      var x = start[0] + i * (width / shape.wave);
      var y = clamp(shape.layout[0][1] + n, 0, shape.height);
      if (x === 0) ctx.moveTo(x, y);else ctx.lineTo(x, y);
    }
    ctx.lineTo(shape.layout[2][0], clamp(shape.layout[2][1], 0, shape.height));
    ctx.lineTo(start[0], clamp(shape.layout[2][1], 0, shape.height));
    ctx.closePath();
    shape.phase++;
  }
});

export { WaterLayout as default };