dataZoom inside with option pinned 'start' 'end'

[techy2]

example: option {
dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1],
start: 10,
end: 100,
anchor: 'end', // acceptable values 'start', 'end'
},

Brief Information

This pull request is in the type of:

• bug fixing
• [x ] new feature
• others

What does this PR do?

during dataZoom type 'inside' optionally pins the zoom feature to 'start' or 'end' of chart

Fixed issues

Details

Before: What was the problem?

After: How does it behave after the fixing?

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• [x ] The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

Others

Merging options

• Please squash the commits into a single one when merging.

Other information

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

⚠️ MISSING DOCUMENT INFO: Please make sure one of the document options are checked in this PR's description. Search "Document Info" in the description of this PR. This should be done either by the author or the reviewers of the PR.

[Ovilia]

Can you explain what does anchor: start/end mean?

[techy2]

anchor: is an optional parameter that only applies to 'inside' zooming, if it is not put in 'option' it has no affect at all.

The default behavior of dataZoom with the mouse wheel is : zoom in, move both edges of the data outwards towards the start and end points of the visible window, and move mored data into the window from the start and endpoints of the visible window.

anchor: changes that behavior so that if the anchor parameter is:
anchor: 'end', then the end will not move, only the start of the data will zoom in and out of the chart view window

anchor: 'start' pins the oldest data so that only the newest data zooms in and out of the view window.

Why is this useful? For financial charts that track information over time, (think of stock trading or monthly revenue) the users typically wants to zoom in on the most recent data. pinning the 'end' allows them to do that:
anchor: 'end',
Allows the user to zoom the oldest data away to the left to see more fine grained detail of the anchored/pinned newest data. To so see long trends, zooming out brings more of the old data into focus so that the shape of the curve becomes more apparent over time.

To say it another way... 'anchor' allows the user to have a chart where data of interest is held in one spot at the edge of the chart while bringing zooming more or less time related data into the viewable focus window at exactly the anchored data point.

With the start or end pinned /anchored, the anchored point can still be moved by dragging the chart or using the slider bar by grabbing the handles or slide tab.

This is a minimal patch that I think provides a great deal of new flexibility.

The reason I made the patch was that I was trying to get this affect using myChart.setOption and event handlers to do it. It can be accomplished that way but it is messy to implement with the event handlers and has a major impact on performance with pixelization and slow rendering during zoom and few other undesirable side effects. I took a look at the echarts code and saw that a simple patch with just a few lines of code would accomplish the objective with no side effects at all, hence the PR

Please feel free to ask for any more details if you need them.