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