[Discuss] UI design in the next big release 5.0！

[Junting Wang <wa...@gmail.com>]

The purpose of the discussion is to collect and discuss with the community
some optimizations needed for the default design of ECharts in 5.0.

Includes theme colors, default styles of chart, and examples.
You are welcome to send feedback on these topics or other topics, which can
be discussed further.

Here are some of the contents that have been discussed:

*Theme color *

   - Can choose color schemes of single-hue, multi-hue,  different order
   schemes. According to the number of series, you can increase the number of
   color subdivision steps.
   https://github.com/apache/incubator-echarts/issues/12923
   - In the theme building tool, users can create a Palette from an Image
   then use it in charts as a color scheme.
   https://github.com/apache/incubator-echarts/issues/12924
   - Provide a new default theme color scheme, which will be used as
   default. (Some principles: provide 8-12 standard colors as a qualitative
   color scheme; the overall style is consistent and recognizable; the hue is
   brighter; provide background colors, text, coordinate axes, scales, and
   other colors; pass the accessibility test. )

*Default style*
*1. Relative font size:*

   - text font support "em" unit.
   https://github.com/apache/incubator-echarts/issues/12927

*2. Hover status:  *https://github.com/apache/incubator-echarts/pull/12925

   - Blur others when highlighting specified data through mouseover or
   hover linking.
   - Two states can be configured on the legend: 1. Dilute other series
   when hover, when click will hide the series. 2. Dilute other series when
   clicked.

*3. Text:*

   - By default, the title text is aligned with the left side of the chart.
   - The color, font size, and spacing of title text and subtext need to be
   distinguished.
   - The font size of the coordinate axis is increased by default.

*4. Line:*

   - Distinguish the level of coordinate axis and grid line,  0 baseline is
   the heaviest, axisLine is general, axisTick and splitLine are weaker.

*5. tooltip: *https://github.com/apache/incubator-echarts/issues/12929

   - tooltip text style: The value needs to be highlighted in bold.
   Category names are aligned left and values are aligned right. Increase the
   line spacing.
   - tooltip display order: provides two ways: 1. according to the series
   order of the chart. 2. Press the height in the numerical direction.
   - tooltip frame style: contains a white floating frame, current series
   of color strokes, shadows, and small triangle arrows.

*6 Timeline, dataZoom, visualMap style* optimization.

*Optimization of specific chart types*
*1. Line chart:*

   - Increase the default line width.
   - Increase the default symbolize.
   - Y-axis axisLine is not displayed by default.
   - Bolder lineWidth when hover.
   https://github.com/apache/incubator-echarts/issues/12931
   - When hover, tooltip.axisPointer.line, the line needs to be displayed
   under the symbol. (The line should not destroy the integrity of the
   symbol.)  https://github.com/apache/incubator-echarts/issues/12933
   - According to the trend, the line is colored differently.
   https://github.com/apache/incubator-echarts/issues/12934

*2. Bar chart:*

   - By default, the distance between individual columns is set to 1/2 of
   the width of the column itself.
   https://github.com/apache/incubator-echarts/issues/12935
   - axisTick, Y-axis axisLine is not displayed by default
   - The color of a single series bar chart contains both positive data and
   negative numbers to be distinguished.
   https://github.com/apache/incubator-echarts/issues/12936

*3. Funnel chart: *https://github.com/apache/incubator-echarts/issues/12937

   - The shape of the funnel chart is optimized, and the bottom is
   non-triangular.
   - Text display style can be configured to display in the block, outside
   the block, two-line display, single-line display. The style of the label
   can be set separately.
   - The labelLine can be set to draw at the top and bottom of the block.

*4. Sankey chart *https://github.com/apache/incubator-echarts/issues/12938

   - The label is displayed in the middle position after edge hover.


*Official examples*

   1. funnel chart example.
   2. Gauge chart example.
   3. PictorialBar example
   4. Unify the style of the examples under each theme.


*Animation improvement*
*1. Line chart:*

   -

    Symbol and line drawing order of line chart
   https://github.com/apache/incubator-echarts/issues/12700
   。
   - Change the animation and appearance time of markPoint
   https://github.com/apache/incubator-echarts/issues/12701
   - The animation of the stacked area chart when opening a series again.
   https://github.com/apache/incubator-echarts/issues/12716

*2. Bar chart：*

   - Grouped histograms can be set in three ways.
   https://github.com/apache/incubator-echarts/issues/12728
   - Change the animation when opening a series of a bar chart again
   https://github.com/apache/incubator-echarts/issues/12715

*3. Boxplot *https://github.com/apache/incubator-echarts/issues/12693

   - Reduce elastic animation when Boxplot is expanded

4. Radar chart  https://github.com/apache/incubator-echarts/issues/12694

   -

   The data value of the selected series can be displayed.
   -

   When converting series, there is a transition animation from the first
   series to the second series.

*5. Dashboard* https://github.com/apache/incubator-echarts/issues/12686

   - The total time of the entry animation and the exit animation of the
   dashboard/circle chart are distinguished.


So far.  Hope you can add more suggestions.
The issues of style design to be solved in 5.0  will be put in the GitHub
milestone later

-- 
Junting Wang