Provide monotone interpolation

- [x] I have searched the [issues](https://github.com/antvis/f2/issues) of this repository and believe that this is not a duplicate.

### What problem does this feature solve?

Currently, users could interpolate the source data by setting shape to `"smooth"` when using lines and areas. But only one interpolation method is provided yet, which unfortunately doesn't ensure monotonicity.

In the image above, the 7 points in the middle has same y-value, but the projected line shows two peaks at both the beginning and the end. *This may cause misleading in some circumstances*. In other words, for each two neighboring data point (x_i, y_i) and (x_{i 1}, y_{i 1}), the interpolated curve should ensure that y_i <= y <= y_{i+1} is true for all point (x, y) that satisfying x_i <= x <= x_{i+1}.

Here's a [reference implementation](https://github.com/d3/d3-shape/blob/master/src/curve/monotone.js) in D3.js.

By the way, I'm willing to help. Please let me know if I could do anything.

### What does the proposed API look like?

Although we could offer the new interpolation as a new type of shape, it's better to add interpolation as a separate attribute of lines and areas.

```js
chart.line().interpolation('linear').position('x*y'); // Default behavior
chart.line().interpolation('monotone').position('x*y');
chart.line().interpolation('catmull-rom').position('x*y'); // New interpolation methods
```

Start with the D3.js monotone interpolation reference linked in the issue and inspect how F2 currently handles the smooth shape for lines and areas. Define the interpolation API alongside the proposed linear, monotone, and catmull-rom examples, and verify that the resulting curve stays between neighboring y-values for each x interval.

Written by the indexing model from the issue text.