z property type and default value
The z property is a number with a default value of 5. It controls the stacking order of components in ECharts.
component-styling
24 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
z property stacking behavior
Components with smaller z values may be overwritten by those with larger z values. This means higher z values appear on top of lower z values.
z property priority relative to zlevel
The z property has a lower priority than zlevel. Unlike zlevel, z will not create a new Canvas.
Component definition in echarts
Components in echarts are abstract entities that include: xAxis, yAxis, grid, angleAxis, radiusAxis, polar, geo, dataZoom, visualMap, tooltip, toolbox, and series. Series is itself a component used for rendering diagrams. The term 'component' sometimes refers to all entities except series.
Absolute positioning with CSS-like properties
Most components and series can be absolutely positioned using top, right, bottom, left, width, and height. Values can be absolute pixels (e.g., bottom: 54) or percentages of the echarts container (e.g., right: '20%'). Horizontal positioning uses left, right, width as one group; vertical positioning uses top, bottom, height as another group. In each group, set only one or at most two attributes, as others can be auto-calculated.
Center-radius positioning for circular components
Circular components or series like pie, sunburst, and polar coordinate systems are positioned using center and radius properties instead of absolute positioning.
Style customization approaches overview
Apache ECharts provides four main approaches for style customization: Theme, Palette, explicit style configuration (itemStyle, lineStyle, areaStyle, label), and visual encoding via the visualMap component. These approaches may have overlapping functionality but are suitable for different scenarios.
Built-in themes in ECharts
ECharts provides three built-in themes: 'default' (the original theme), 'light', and 'dark'. These can be set when initializing a chart using echarts.init(dom, themeName).
Loading custom theme JSON files
Custom themes downloaded as JSON files must be manually registered using echarts.registerTheme(themeName, themeObject) before initializing a chart with that theme. The theme JSON must be fetched and parsed before registration.
Loading custom theme JS files
Custom themes downloaded as JavaScript files auto-register themselves when imported into HTML, and can be used immediately with echarts.init(dom, themeName) without manual registration.
Explicit style configuration options
Style can be explicitly configured using options like itemStyle, lineStyle, areaStyle, and label throughout the chart option. These options can be set at various places depending on the series type or component, following a consistent naming convention.
Theme resource location
Additional themes beyond the built-in default, light, and dark themes can be visited, previewed, created, and downloaded from the Theme Builder at https://echarts.apache.org/en/theme-builder.html.
Gauge series rotation and hover options changed in v5
In v5, gauge series deprecated options: series.clockWise → series.clockwise, series.hoverOffset → series.emphasis.scaleSize.
rich text padding order changed to match CSS in v5
ECharts v5 adjusts rich.?.padding to comply with CSS specifications. In v4, padding: [11, 22, 33, 44] meant top=33 and bottom=11. In v5, the same padding array means top=11 and bottom=33. Users with existing rich.?.padding configurations need to adjust the order.
Graphic element transform properties deprecated in v5
In v5, graphic element transform properties are deprecated in favor of individual axis properties. Deprecated: position: [number, number] is changed to x: number and y: number. Deprecated: scale: [number, number] is changed to scaleX: number and scaleY: number. Deprecated: origin: [number, number] is changed to originX: number and originY: number. Old properties still work but are deprecated. This affects graphic components, custom series renderItem, and direct zrender use.
Graphic element text properties refactored in v5
In v5, text-related properties on graphic elements are changed. The style.text property is deprecated in elements except Text; use textContent and textConfig instead. Deprecated text positioning properties: textPosition → textConfig.position, textOffset → textConfig.offset, textRotation → textConfig.rotation, textDistance → textConfig.distance. Deprecated style text color/font properties: textFill → fill, textStroke → stroke, textFont → font, textStrokeWidth → lineWidth, textAlign → align, textVerticalAlign → verticalAlign, textWidth → width, textHeight → height, textBackgroundColor → backgroundColor, textPadding → padding, textBorderColor → borderColor, textBorderWidth → borderWidth, textBorderRadius → borderRadius, textBoxShadowColor → shadowColor, textBoxShadowBlur → shadowBlur, textBoxShadowOffsetX → shadowOffsetX, textBoxShadowOffsetY → shadowOffsetY. Unchanged: textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY. Affects graphic components, custom series renderItem, and direct zrender API.
Label 'auto' value deprecated, use 'inherit' in v5
In v5, the value 'auto' for label properties color, textBorderColor, backgroundColor, and borderColor is deprecated. Use 'inherit' instead.
Pie series label and rotation options changed in v5
In v5, pie series deprecated options: series.label.margin → series.label.edgeDistance, series.clockWise → series.clockwise, series.hoverOffset → series.emphasis.scaleSize.
Visual style priority changed between visualMap and itemStyle in v5
In v4, visuals generated by visualMap component had the highest priority and would overwrite itemStyle, lineStyle, and areaStyle settings. In v5, this is reversed: visuals specified in itemStyle, lineStyle, and areaStyle now have the highest priority and will override visualMap visuals. This allows specific styling for individual data items when using visualMap.
Label automatic hiding and truncation features
Apache ECharts 5 can automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. These features take effect by default and greatly simplify the development cost for developers by avoiding text that is too dense and affects readability.
Label control options in ECharts 5
Apache ECharts 5 provides several configuration options to allow developers to actively control the layout strategy of labels, including tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and highlighting of the associated relationships.
Gauge chart enhancements in ECharts 5
Apache ECharts 5 upgraded the gauge chart to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more. These upgrades allow developers to achieve cool effects with simpler configuration items while bringing richer customization capabilities.
Rounded corner support for pie and other charts
Apache ECharts 5 supports rounded corner (borderRadius) for pie charts, sunburst charts, and treemap charts. These rounded corners can be combined with other effects to create more personalized visualizations.
New default theme design in ECharts 5
Apache ECharts 5 redesigned the default theme style for both light and dark themes, optimizing it for different charts and components. The design took into account factors such as color differentiation between data points, contrast with background colors, harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.