Purpose of This Discussion
Collect and discuss features included in 5.0 with the community. Finally,
have a draft to describe the Roadmap of ECharts 5.0 which can be posted on
the medium.
You are welcomed to send feedback on these topics or other features that
should be further discussed.
Things have been Done
We just finished migrating our codebase to TypeScript in the last month.
Discussions about migrating to TypeScript can be referred to in [1].
Here is some brief on the pros of using TypeScript:
- With static typing, refactoring code can be more efficient and
confident.
- Type definition can be exported and provided to the developers using
TypeScript.
- It will be more efficient when exploring the source code.
Also, we have created a branch named next[2] for 5.0 developing. Some of
the refactoring work has been started on this branch.
Meanwhile, we will keep fixing bugs in the master branch and releasing 4.x
minor versions before 5.0 is finally released.
Topics to be Discussed
Here are 7 topics I summarized from the discussions earlier. Each of the
topics may contain several smaller features or changes. Most of them are
concluded from the requested features of developers.
It's not settled yet and may change during the discussion or even
developing. Please leave your comments and discuss with us if you have any
suggestions at any time.
1) Animation Improvement in the Scenario of Storytelling
Animation is very frequently used in visualization storytelling. It's
important to use transitions to show the relationship of data between two
frames. We already have a timeline component and transitions to be used in
storytelling.
Ovilia has made a wonderful tutorial[3] about visualizing COVID-19
increment of each Country with timeline component.
Still, animation provided in ECharts is not enough. In storytelling, all
things should all be animated nicely and smoothly. No sudden change is
expected.
So in 5.0, we will take the animation effect to another level with more
expressive animation configurations. Not only the basic position and scale
transitions:
- Text can be animated. To achieve the effect like bar chart race[4] or
line chart race.
- Add transition between two different shapes. For example, a rect shape
in the bar chart can be transit to a sector shape in the pie chart smoothly.
- If data is grouped or separated. The shapes will be merged or split
with a nice animation.
2) Label Auto-placement.
Labels are used for showing more details of data. A neatly drawn label on
the chart can help users understanding the chart better.
But currently, label overlapping is still a big issue that bothers
developers a lot. They need to write verbose code to determine which labels
should be displayed to avoid overlapping.
The targets of label placement in 5.0 are flexible, intuitive and display
nice. We are planning to add the following enhancements for label placement.
- Label position can be a callback. For the convenience of something
like aligning labels on the edge of chart.
- Label auto-placement will use the developers' specified position as an
anchor and adjust itself around it to avoid overlapping.
- Label will be hidden if the placement degenerates in the previous
layout stage.
- For each label, a line will be used for guiding if it's far from the
element. And hover-link will be applied.
3) More Powerful Custom Chart
ECharts have custom series to let developers draw charts we not provided,
for example OHLC chart[5]. In 5.0 we will add more features in the custom
series to be possible of drawing more kinds of charts.
- Developer can specify animated properties in the renderItem function.
- Provide more API to developers to get the necessary data to draw a
proper shape.
- Draw shape for the whole series instead of each item.
Su Shuang has a more detailed summarization in the issue [6]
4) Transforms of Dataset.
Dataset is introduced since ECharts 4.0. It can use an array table or a
key-value object as data source. So developers don't have to process the
data before setOption.
In 5.0. We can provide more powerful statistics methods in the dataset so
developers can get rid of most of the data processing code.
There is an extension[7] of ECharts that already did the statistics job.
But the API it provided is loose for ECharts. We can integrate it in the
dataset component and provide a more declarative API.
Besides the usage convenience brought by deep integration. We can easily
find the connection between raw data and statistics results underlying. On
top of this, more advanced interactions like linked highlight, merge and
split animations described in the first topic can be achieved.
vega-transform[8] is also a good example for us about designing a
declarative statistics API.
5) Provide More States for User Interaction.
Currently, most of our charts only have two states during user interaction.
normal and emphasis.
When mouse is on the element. The element will enter emphasis state and
being applied with a highlight style. When mouse leaves the element. The
element will leave emphasis state and returns to normal.
Two states are far from enough if we want to apply more complex user
interactions. For example:
- Highlight selected data with mouse click.
- Focus on the hovered element while fadeout others.
- Highlight the specific data while the chart is initialized. And keep
it highlighted during user interaction.
- ...
To solve this issue, we are planning to add two more states: blur and
selected. They are states like normal and emphasis which can be configured
with different styles respectively. Some basic rules explained:
- Item/series will enter blur state when some other item/series is
focused.
- Item/series will leave blur state when none of the item/series is
focused.
- Item will enter selected state when it's clicked or being selected by
brush component.
- Item will leave selected state when others or blank area is clicked.
It may have more complex behaviors in some of the charts.
6) Performance Improvement.
Performance improvement is mostly about reducing initialize time and heap
memory cost, especially for the line chart.
7) Squash Bugs and Other Improvements
Improvements that matters in 5.0 but not included in the above topics:
- Enhance 'time' type axis
- Different formatter for different time unit.
- More flexible interval configuration. Each tick can be configured
as 'nth day of each month'.
- Align the axis ticks of both sides.
- More detailed legend style.
- Map with SVG data source.
- ...
Issues to be solved in 5.0 will be put in the GitHub milestone[9]
[1]
https://lists.apache.org/thread.html/9bd278fd81853eb5fb9e2706c343545fed4d145690e1977b99ced591%40%3Cdev.echarts.apache.org%3E
[2] https://github.com/apache/incubator-echarts/commits/next
[3]
https://medium.com/@Ovilia/making-a-covid-19-map-with-echarts-and-leaflet-30fdcd8739c6
[4] https://app.flourish.studio/@flourish/bar-chart-race
[5] https://echarts.apache.org/examples/en/editor.html?c=custom-ohlc
[6] https://github.com/apache/incubator-echarts/issues/11870
[7] https://github.com/ecomfe/echarts-stat
[8] https://vega.github.io/vega/docs/transforms/
[9] https://github.com/apache/incubator-echarts/milestone/10
Regards!
--
Yi Shen
Apache ECharts(incubating) PPMC
